| <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
'' ''
##Use cdn
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>##Register 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()