• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

157
Vistas
Reset slide to the initial slide after images changes on swiper for angular

Scenario : When the page is rendering the products are shown and every product has a discover button. On clicking the button I want to display the gallery / slider images below that product.

Currently, when I click the first product, Swiper is showing the images. And, if I slide the images to 3rd or 4th (or any), the new product slider image is starting from that particular index i.e., from 3rd or 4th.

The configuration I used for Swiper is :

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'
  };

And, the discover button is calling the below method :

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);
}

I searched the docs and google, didn't find any reliable solution. Please suggest some answers. Thank you in advance.

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Check the documentation at https://swiperjs.com/swiper-api - seems that you can use swiper.slideTo(index, speed, runCallbacks) method to revert to first (or any) slide element whenever you need, like upon changing the active product.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda