在 swiper 上的图像更改为角度后，将幻灯片重置为初始幻灯片答案

【问题标题】：Reset slide to the initial slide after images changes on swiper for angular在 swiper 上的图像更改为角度后，将幻灯片重置为初始幻灯片
【发布时间】：2021-12-31 11:44:00
【问题描述】：

场景： 当页面呈现产品时，每个产品都有一个发现按钮。单击按钮时，我想在该产品下方显示图库/滑块图像。

目前，当我单击第一个产品时，Swiper 正在显示图像。而且，如果我将图像滑动到第 3 或第 4（或任何），新产品滑块图像将从该特定索引开始，即从第 3 或第 4 开始。

我用于 Swiper 的配置是：

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

而且，发现按钮正在调用以下方法：

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

我搜索了文档和谷歌，没有找到任何可靠的解决方案。请提出一些答案。提前谢谢你。

【问题讨论】：

我尝试了很多答案，但最终得到了简单的方法。我在 Swiper 上使用了 [(index)]="index"，在发现功能上我将索引初始化为 0。而且，它运行良好。

标签： javascript angular typescript swiper

【解决方案1】：

查看https://swiperjs.com/swiper-api 的文档 - 似乎您可以在需要时使用swiper.slideTo(index, speed, runCallbacks) 方法恢复到第一个（或任何）幻灯片元素，例如在更改活动产品时。

【讨论】：