2021-6-24 工作记录--Swiper-外部内容与轮播图的连接【重要 重要 重要】

一、轮播图切换到某slide时，外部内容进行相应改变

【注意：onSlideChangeEnd适用于swiper3.0.0版本，其他版本的对应方法去swiper官网里的API文档查看】

对应代码：

onSlideChangeEnd: function (swiper20) {
    // alert(swiper20.activeIndex); // 这里的swiper20.activeIndex指对应轮播图(swiper-slide)的索引值
    const num4 = swiper20.activeIndex + 1; // 前提是这个轮播不能loop（即：初始化时没有加loop:true，不然其activeIndex会有问题）
    $('.text_content3 span').html('0' + num4);
  }

【补充：
循环轮播时，可获取到准确的当前轮播图的索引值

计算方式：

• 1、获取到swiper-slide的数量；
  • 通过遍历数组的长度即可获得，比如：arr?.length
• 2、先依次列举出来每个swiper-slide对应的swiper.activeIndex的值；
  • 比如：有5个swiper-slide，实验获得其对应的为 7 3 4 5 6 （list1）
• 3、每个swiper-slide依次对应的索引值应该是 0 1 2 3 。。。；
  • 比如：有5个swiper-slide，其对应的索引值就为 0 1 2 3 4 （list2）
• 4、计算出如何将 （list1） 和arr?.length建立联系，最终获取到 （list2），这个计算公式就是我们最终想要的结果啦
  • 比如：const currentIndex = Number((swiper.activeIndex + Number(arr?.length - 2)) % Number(arr?.length)); // 获取到当前索引值

// 初始化swiper
new Swiper(".swiper-container1", {
       pagination: '.swiper-pagination',
       paginationClickable: true,
       autoplay: 2000,
       loop: true, // 循环播放
       onSlideChangeEnd:(e) => { // swiper从一个slide过渡到另一个slide结束时执行
           let index = Number((e.activeIndex+Number(store.homeInfo?.banner?.length-1))%Number(store.homeInfo?.banner?.length));
           // 如果上面方式获取到的index不准确，可以试试下面这种方式哦~
           // let index = Number((e.activeIndex+Number(store.homeInfo?.banner?.length))%Number(store.homeInfo?.banner?.length));
           console.log(index); // 获取到 对应轮播图的索引值
       }
});

】

【注意：slideChangeTransitionEnd适用于swiper4.0.0版本，其他版本的对应方法去swiper官网里的API文档查看】

二、外部内容进行相应改变时，轮播图切换到相应slide

举例1：点击图标，可以使轮播图切换到对应索引号的界面

【注意：白色框框里的内容要相对应】

举例2：