Alpinejs Swiperjs Component Image Carousel

Carousel.blade.php

<div x-data="mySliderComponent">
<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="{{ asset('images/products/'.$image) }}" alt="product image" class="w-full h-full object-cover">
            </div>
        </div>
        // enable paginatiion  \\
       {{--
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
       --}} 
  </div>
</div>

<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('mySliderComponent', () => ({
    slider: null,
    init() {
      if(this.$refs.slider) {
        this.slider = new this.$store.Swiper(this.$refs.slider, {})
      }
        ////// swiper config //////
       //     slidesPerView: 1,
       //     spaceBetween: 30,
       //     loop: true,
       //     navigation: {
        //        nextEl: '.swiper-button-next',
         //       prevEl: '.swiper-button-prev',
        //    },
       //     breakpoints: {
       //         640: {
        //            slidesPerView: 2,
         //           spaceBetween: 20,
          //      },
        //        768: {
       //             slidesPerView: 3,
         //           spaceBetween: 40,
         //       },
        //        1024: {
        //            slidesPerView: 4,
         //           spaceBetween: 50,
        //        },
        //    }
    }
  })
})
</script>

Usage.md

USAGE

<x-carousel :image="$image" />

Use cdn

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

Register in Aop.Js globallyRegister in Aop.Js globally

// Import modules import Swiper from 'swiper'

// Import alpine import Alpine from 'alpinejs' window.Alpine = Alpine

// Register module in alpines store Alpine.store('Swiper', Swiper)

// Start alpine Alpine.start()