Swiper Slider

Swiper Slider is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior For more details

HTML Code
<div class="block" data-tab-content="true" id="carouselsection">
    <div class="custom-swiper-slider">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide relative">
                    <img src="../assets/images/plugins/02.jpg" class="img-fluid rounded block w-full" width="800" height="400" alt="profile-image" loading="lazy">
                </div>
                <div class="swiper-slide">
                    <img src="../assets/images/plugins/03.jpg" class="img-fluid rounded block w-full" width="800" height="400" alt="profile-image" loading="lazy">
                </div>
                <div class="swiper-slide">
                    <img src="../assets/images/plugins/04.jpg" class="img-fluid rounded block w-full" width="800" height="400" alt="profile-image" loading="lazy">
                </div>
                <div class="swiper-slide">
                    <img src="../assets/images/plugins/05.jpg" class="img-fluid rounded block w-full" width="800" height="400" alt="profile-image" loading="lazy">
                </div>
                <div class="swiper-slide">
                    <img src="../assets/images/plugins/06.jpg" class="img-fluid rounded block w-full" width="800" height="400" alt="profile-image" loading="lazy">
                </div>
                <div class="swiper-slide">
                    <img src="../assets/images/plugins/02.jpg" class="img-fluid rounded block w-full" width="800" height="400" alt="profile-image" loading="lazy">
                </div>
                <div class="swiper-slide">
                    <img src="../assets/images/plugins/03.jpg" class="img-fluid rounded block w-full" width="800" height="400" alt="profile-image" loading="lazy">
                </div>
                </div>
                <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
</div>
Script
document.addEventListener('alpine:init', () => {
  Alpine.data('SwiperSlider', () => ({
    swiper: null,
    init() {
      this.swiperInit()
    },
    swiperInit () {
      this.swiper = new Swiper(this.$refs.container, {
        loop: true,
        slidesPerView: 1,
        spaceBetween: 0,
        breakpoints: {
          640: {
            slidesPerView: 1,
            spaceBetween: 0,
          },
          768: {
            slidesPerView: 1,
            spaceBetween: 0,
          },
          1024: {
            slidesPerView: 4,
            spaceBetween: 0,
          },
        },
      })
    }
  })
  )
})
Previous Next