Escenario: cuando la página se muestra, se muestran los productos y cada producto tiene un botón de descubrimiento. Al hacer clic en el botón, quiero mostrar las imágenes de la galería / control deslizante debajo de ese producto.
Actualmente, cuando hago clic en el primer producto, Swiper muestra las imágenes. Y, si deslizo las imágenes a la 3ra o 4ta (oa cualquiera), la nueva imagen del control deslizante del producto comienza desde ese índice en particular, es decir, desde la 3ra o la 4ta.
La configuración que utilicé para Swiper es:
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 descubrir está llamando al siguiente método:
discover(locationId) { this.locationImages = []; this.destinations.forEach(selectedData => { if(selectedData._id == locationId){ selectedData.optional_images.forEach(image => { this.locationImages.push(image) }); } }); console.log(this.locationImages); }
Busqué en los documentos y en Google, no encontré ninguna solución confiable. Sugiera algunas respuestas. Gracias de antemano.
Consulte la documentación en https://swiperjs.com/swiper-api ; parece que puede usar swiper.slideTo(index, speed, runCallbacks)
para volver al primer (o cualquier) elemento de diapositiva cuando lo necesite, como al cambiar el producto activo.