Estoy usando SwiperJS para un carrusel de galería, estoy usando el método vainilla en AlpineJS, la paginación funciona con clics (en puntos o flechas) pero si deslizo la imagen, la paginación sigue en el mismo punto, probé con esta solución pero la paginación aún no funciona al deslizar

Este es mi archivo Laravel mix app.js

 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;

y este es mi código alpineJS

 <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>

En la consola del navegador web, no recibí ningún mensaje de error.

¿Cómo puedo resolverlo?