前端用swiper插件做两个轮播图，如何实现在一个轮播图播放时，触摸屏幕开始跳转到第二个轮播图进行播放

前端用swiper插件做两个轮播图，如何实现在一个轮播图播放时，触摸屏幕开始跳转到第二个轮播图进行播放

目前只实现了一个轮播图 代码展示

问题是第二个轮播图该如何实现、触摸屏幕跳转这个功能如何实现

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7687270
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：关于修改swiper轮播图插件中的小圆点变成背景图
• 除此之外, 这篇博客: 微信小程序 # 轮播图swiper滑动到最后一页进行页面跳转中的 实现思路 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• <view  class="container" id="first-in">
      <swiper bindchange="bindchange" duration="300" circular indicatorDots interval="3000">
          <swiper-item wx:for="{{swiperImgs}}" wx:key="this"><image src="{{item}}" /></swiper-item>
      </swiper>
  </view>
  

  const app = getApp()
  const cloudFileBase = "cloud://xxxxxxxxxxx"
  Page({
    data: {
      // 第一次进入的开屏动画
      last_pos: 0,
      swiperImgs: [
        cloudFileBase + "/images/qidong1.png",
        cloudFileBase + "/images/qidong2.png",
        cloudFileBase + "/images/qidong3.png"
      ]
    },
    bindchange: function(e){
      if(this.data.last_pos == this.data.swiperImgs.length-1 && e.detail.current == 0){
        wx.switchTab({
          url: '../index/index'
        })
      }
      this.data.last_pos = e.detail.current;
    }
  })
  

• 您还可以看一下 汤小洋老师的Swiper移动端滑动插件视频教程课程中的 Swiper简介小节, 巩固相关知识点
  

有帮助的话 采纳一下
在事件回调中,使用第二个轮播图实例的 slideTo 方法,切换到第一个 slide

swiper2.slideTo(0);

题主可以多看文档：https://swiper.com.cn/api/autoplay/112.html

你可以根据事件，来控制轮播图实例的开始和暂停