Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

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

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

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos