Vue project combination, vant implementation in the carousel diagram, click on the picture to enlarge the picture

Ideas:

1. The function ImagePreview is provided in vant
2. Set a click event for each sub-element of the original image, provide the initial-swipe index in the api, and get the index of the original image
3. Set the change event, save the corresponding index of the large image switch to your own initial-swipe index
4. When setting the picture preview switching, set the position of the original picture according to the index after switching, and the original picture of the big picture will be synchronized
5. The original image swipeTo(i) switches to the specified position

code:

  <!-- 轮播图 -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        :initial-swipe="index" //自己定义的index值
        @change="onChange"
        ref="mySwipe"
      >
        <van-swipe-item
          v-for="item in imgList"
          :key="item"
          @click="onImgPreView"
        >
          <van-image 
            width="100vw" 
            height="3rem" 
            fit="contain" 
            :src="item" />
        </van-swipe-item>
      </van-swipe>

Zoom in picture

    // 放大图片
    onImgPreView() {
      // 点击轮播图时,通过数据拿到当前索引,根据当前索引创建图片预览,设置默认图片
      const that = this;
      ImagePreview({
        images: this.imgList, //点击后的图片。
        startPosition: this.index, //index默认为0，提供的起始位置
        onChange(i) { 
          // 当图片预览切换时,根据切换后的索引,设置轮播图的位置
          that.$refs.mySwipe.swipeTo(i);
        },
      });
    },
   onChange(index) { //vant提供的索引值
      // 在轮播图切换时,将索引保存到数据中
      this.index = index;
   },

Author: Wang Yanan