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.

Continue reading...