两个轮播图,第一个垂直排序第二个水平排序 第二个自动播放第一个也会跟随切换,点击第一个的时候第二个也会切换
时间: 2024-03-12 16:50:17 浏览: 12
可以使用两个不同的Swiper实例来实现这个功能。其中,第一个Swiper实例的`direction`参数设置为`vertical`,第二个Swiper实例的`direction`参数设置为`horizontal`,并且第二个Swiper实例开启自动轮播。
为了实现点击第一个Swiper时第二个Swiper也会跟随切换,可以在第一个Swiper实例的`slideChange`事件中,手动切换第二个Swiper实例的当前slide,代码如下:
```javascript
// 初始化第一个Swiper实例
var swiper1 = new Swiper('.swiper1', {
direction: 'vertical',
// 其他配置参数
on: {
slideChange: function() {
// 切换第二个Swiper实例的当前slide
swiper2.slideTo(swiper1.activeIndex);
}
}
});
// 初始化第二个Swiper实例
var swiper2 = new Swiper('.swiper2', {
direction: 'horizontal',
autoplay: {
delay: 3000,
disableOnInteraction: false
}
});
```
这样就可以实现两个轮播图,第一个垂直排序第二个水平排序,第二个自动播放,第一个点击时第二个也会切换的功能。