vue3+ts+swiper联动

moranlll

已于 2023-08-31 18:42:31 修改

阅读量444

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js typescript

于 2023-08-31 18:41:00 首次发布

本文链接：https://blog.csdn.net/qq_38126315/article/details/132609285

本文介绍了如何在JavaScript中使用Swiper库创建两个联动的滑块(mySwiper1和mySwiper2)，通过监听滑块变化事件(onSlideChange)实现在一个滑动时另一个同步滑动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置标识，mySwiper1和mySwiper2

@swiper="mySwiper1"

设置监听，onSlideChange1和onSlideChange2方法

@slideChange="onSlideChange1"

开启联动
在方法区写

//控制联动
let mySwiper1Temp = null;
let mySwiper2Temp = null;
const mySwiper1= (swiper) => {
  mySwiper1Temp = swiper;
}
const mySwiper2= (swiper) => {
  mySwiper2Temp = swiper;
}

const onSlideChange1= (swiper) =>{
  let index = swiper.activeIndex;
  mySwiper2Temp.slideTo(index)
}
const onSlideChange2= (swiper) =>{
  let index = swiper.activeIndex;
  mySwiper1Temp.slideTo(index)
}