es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Restablecer la diapositiva a la diapositiva inicial después de que las imágenes cambien en el swiper para Angular.

Restablecer la diapositiva a la diapositiva inicial después de que las imágenes cambien en el swiper para Angular.

31 Jul, 2023 Programación

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.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Basado en el escenario proporcionado, parece que el problema está en la configuración de Swiper. La propiedad initialSlide está establecida en 0, lo que significa que Swiper siempre comenzará con la primera diapositiva. Para solucionar esto, puedes actualizar la propiedad initialSlide con el índice del producto seleccionado, para que el slider del producto seleccionado comience desde la primera diapositiva. Por ejemplo, en el método discover(), puedes agregar la siguiente línea:

    this.config.initialSlide = 0; // reemplaza 0 con el índice del producto seleccionado

    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 a true para evitar que Swiper restablezca la posición del slider al navegar entre diferentes productos. Con loop establecido en true, Swiper recorrerá continuamente las diapositivas sin restablecer la posición.

    loop: true

    En general, tu SwiperConfigInterface actualizada debería lucir algo así:

    public config: SwiperConfigInterface = {
  centeredSlides: true,
  initialSlide: 0, // reemplazar con el índice del producto seleccionado
  slidesPerView: 1,
  loop: true, // actualizar a true
  spaceBetween: 0,
  autoplay: false,
  direction: 'horizontal',
  keyboard: false,
  navigation: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  },
  hashNavigation: false,
  effect: 'slide'
};

    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.

Comments are closed.