Theme 32 Blank

Appearance

Slider ​

Le projet fournit une directive Alpine x-slider basée sur la librairie swiper.js, permettant de créer des carrousels moderne.

Utilisation simple ​

html
<div class="swiper" x-slider>
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        ...
    </div>
</div>
html
<div class="swiper" x-slider>
  <div class="swiper-wrapper">
      <div class="swiper-slide"></div>
      ...
  </div>
    <div class="swiper-pagination"></div>
</div>

Le composant x-slider détecte automatiquement la pagination et la navigation

Utilisation avec options personnalisées ​

La directive accepte un objet de configuration swiper.js :

html
<div class="swiper" x-slider="{
    spaceBetween: 20, 
    breakpoints: {
            650: {
                spaceBetween: 40,
            },
            1024: {
                spaceBetween: 60,
            }
    }}">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        ...
    </div>
    <div class="swiper-pagination"></div>
</div>

Les options passées surchargent les valeurs par défaut.

Documentation ​

https://swiperjs.com/swiper-api