SwiperJS. Pagination not working after swiping an item

Question

I'm using SwiperJS for a Gallery Carousel, I'm using the vanilla method in AlpineJS, pagination is working on clicks (on dots or arrows) but if I swipe the image, the pagination is still in the same dot, I tried with this solution but pagination still not working on swiping

This is my Laravel mix app.js file

import Swiper, { Navigation, Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
window.Swiper = Swiper;
window.SwiperNavigation = Navigation;
window.SwiperPagination = Pagination;

and this is my alpineJS code

          <div class="py-2"
              x-data="{swiper: null}"
              x-init="swiper = new Swiper('.swiper',
                   {
                      modules: [SwiperNavigation, SwiperPagination],
                      loop: true,
                      slidesPerView: 'auto',
                      centeredSlides: true,
                      spaceBetween: 30,
                      hashNavigation: {
                      watchState: true,
                   },

                      pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                      },

                      navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                      },
                        })">
                   <div class="swiper w-full h-72">
                     <div class="swiper-wrapper">
                        @foreach($detail->getMedia('post-medias') as $index => $media)
                           <div class="swiper-slide flex justify-center" data-hash="slide{{$index+1}}">
                                  <img class="h-64"
                                             src="{{$media->getUrl()}}">
                           </div>
                        @endforeach
                     </div>
                     <div class="swiper-pagination"></div>
                     <div class="swiper-button-prev"></div>
                     <div class="swiper-button-next"></div>
               </div>
           </div>

In the web browser console, I didn't receive any error message

How can I solve it?

Answer 1

You are using wrong class name yours should be something like this:

  pagination: {
    el: '.swiper',
    clickable: true,
  }

In the el you have to pass the class of swiper container.