Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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.
                I tried a lot of answers, but finally got the easy way. I used [(index)]="index" on Swiper and on my discover function I initialized the index to 0. And, it is working good.
– Sagar
                Jan 3, 2022 at 8:04
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.