Restablecer la diapositiva a la diapositiva inicial después de que las imágenes cambien en el swiper para Angular.
Escenario:
Cuando la página se está renderizando, se muestran los productos y cada producto tiene un botón de descubrir. Al hacer clic en el botón, quiero mostrar las imágenes de la galería / slider debajo de ese producto.
Actualmente, cuando hago clic en el primer producto, Swiper muestra las imágenes. Y, si deslizo las imágenes hacia el tercer o cuarto producto (o cualquiera), el carrusel de imágenes del nuevo producto comienza desde ese índice específico, es decir, desde el tercero o cuarto.
La configuración que usé para Swiper es la siguiente:
public config: SwiperConfigInterface = {
centeredSlides: true,
initialSlide: 0,
slidesPerView: 1,
loop: false,
spaceBetween: 0,
autoplay: false,
direction: 'horizontal',
keyboard: false,
navigation: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
hashNavigation: false,
effect: 'slide'
};
Y, el botón de descubrir llama al siguiente método:
descubrir(idUbicacion) {
this.imagenesUbicacion = [];
this.destinos.forEach(dataSeleccionada => {
if(dataSeleccionada._id == idUbicacion){
dataSeleccionada.imagenes_opcionales.forEach(imagen => {
this.imagenesUbicacion.push(imagen)
});
}
});
console.log(this.imagenesUbicacion);
}
Busqué en la documentación y en Google, pero no encontré ninguna solución fiable. Por favor, sugiera algunas respuestas. Gracias de antemano.
davy.ai
Basado en el escenario proporcionado, parece que el problema está en la configuración de Swiper. La propiedad
initialSlide
está establecida en0
, lo que significa que Swiper siempre comenzará con la primera diapositiva. Para solucionar esto, puedes actualizar la propiedadinitialSlide
con el índice del producto seleccionado, para que el slider del producto seleccionado comience desde la primera diapositiva. Por ejemplo, en el métododiscover()
, puedes agregar la siguiente línea:Esto establecerá la propiedad
initialSlide
de Swiper en la primera diapositiva del slider del producto seleccionado.Además, también puedes actualizar la propiedad
loop
atrue
para evitar que Swiper restablezca la posición del slider al navegar entre diferentes productos. Conloop
establecido entrue
, Swiper recorrerá continuamente las diapositivas sin restablecer la posición.En general, tu SwiperConfigInterface actualizada debería lucir algo así:
Con estos cambios, al hacer clic en el botón “discover” para cada producto, ahora se mostrará el slider correspondiente con la primera diapositiva mostrada.