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.