Vue.js| 365笔记第94天 | swiper关联轮播图,联动轮播

需求:

1.一个页面分成两个部分,左右竖向轮播图宽度比:1:2;
2.左边的轮播可以控制右边的轮播,右边的轮播也可以控制左边的轮播;
3.都支持onmousewheel,鼠标拖拽翻页,自动轮播;

效果如下:

Vue.js| 365笔记第94天 | swiper关联轮播图,联动轮播_第1张图片
图片.png
Vue.js| 365笔记第94天 | swiper关联轮播图,联动轮播_第2张图片
自动
Vue.js| 365笔记第94天 | swiper关联轮播图,联动轮播_第3张图片

代码

  
    

注:需要引入swiper组件的js和css,地址:

https://www.swiper.com.cn/api/autoplay/111.html

你可能感兴趣的:(Vue.js| 365笔记第94天 | swiper关联轮播图,联动轮播)