每个tab选项卡里都是swiper轮播插件怎样分开控制左右箭头?
2017-07-19 08:32
351 查看
说实话这个问题就纠结我有几天了,这几天在解决bug就揪着这个问题一直在想办法,今天终于解决了。
简单描述一下我做的效果,就是三个tab切换,开始做的时候,只有第一个选项卡里面的左右箭头能动,后面两个选项卡不能切换,后来这么解决的:
因为选项卡里都是swiper轮播效果,而且又是用左右箭头控制的,所以给每个swiper-container后面加一个类“-数字”,还有左右箭头同样加上一个类“-数字”(这里的类名随便你自己怎么取,但是对应的上面代码要改,最好是加数字,这样比较方便),原本的类名不动。还有这里用到了swiper.destroy()方法,大家可以去swiper官网文档查看这个方法的用法。希望能帮助到大家,有什么不懂的可以评论。我看到会及时回复。
简单描述一下我做的效果,就是三个tab切换,开始做的时候,只有第一个选项卡里面的左右箭头能动,后面两个选项卡不能切换,后来这么解决的:
因为选项卡里都是swiper轮播效果,而且又是用左右箭头控制的,所以给每个swiper-container后面加一个类“-数字”,还有左右箭头同样加上一个类“-数字”(这里的类名随便你自己怎么取,但是对应的上面代码要改,最好是加数字,这样比较方便),原本的类名不动。还有这里用到了swiper.destroy()方法,大家可以去swiper官网文档查看这个方法的用法。希望能帮助到大家,有什么不懂的可以评论。我看到会及时回复。
相关文章推荐
- vue2.0引用vue-awesome-swiper插件实现左右滑动轮播效果
- js图片轮播,可控制中间位置选中状态和左右箭头控制
- swiper 轮播图插件
- swiper图片轮播插件
- BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
- jquery控制左右箭头滚动图片列表
- swiper插件制作轮播图swiper2.x和3.x差别
- js图片轮播可控制是否循环轮播,点击左右按钮切换
- 动感效果的TAB选项卡jquery 插件
- jQuery右侧Tab选项卡的焦点图插件
- 动感效果的TAB选项卡 jquery 插件
- vue插件tab选项卡使用小结
- 转载【微信小程序】:微信小程序滚动Tab选项卡:左右可滑动切换(仿某宝)
- jq实现图片轮播:圆形焦点+左右控制+自动轮播
- 语音控制的tab选项卡
- js支持键盘控制的左右切换立体式图片轮播效果代码分享
- 左右滚动jquery 插件 swiper
- 带左右箭头图片轮播的JS代码
- Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
- 【前端】使用Swiper显示正方体,左右翻转轮播图