var wid,index; var head_swiper = new Swiper("#headbanner",{ loop:true, autoplay:3000, speed:500, autoplayDisableOnInteraction:false, onInit: function(swiper){ wid = $(window).width() swiper.setWrapperTranslate('-'+wid); }, onSlideChangeEnd:function(swiper){ swiper.update() wid = swiper.width index = swiper.activeIndex swiper.setWrapperTranslate('-'+index*wid); }, onAutoplay: function(swiper){ swiper.update() wid = swiper.width index = swiper.activeIndex swiper.setWrapperTranslate('-'+index*wid); } }) $(".icon-right").on("click",function(){ head_swiper.slideNext();//让索引增加1,但是滑动距离不正确,因此自定义滑动距离,所以这里两个滑动的api不矛盾!!! wid = head_swiper.width index = head_swiper.activeIndex head_swiper.setWrapperTranslate('-'+index*wid); }) $(".icon-left").on("click",function(){ head_swiper.slidePrev(); wid = head_swiper.width index = head_swiper.activeIndex head_swiper.setWrapperTranslate('-'+index*wid); }) 相对完善的一个案例,记录一下面条代码,不懂优化,唉~ |
有没有swiper用的熟的大牛指点一下下啊挺难受的,总是遇到各种问题,然后瞎折腾。。。 |
兄弟,你qq多少,请教一下你怎么解决的? |
你这笑容!!感觉被鄙视了呢!! 现在用起来好多了~ 就是container的名字自己取一个,不用模板里面的,然后就没出现过问题了,分页,左右切换放在container里面,就不需要绑定事件来点击切换了! 现在看看这帖子我自己也觉得很好笑,当时真的走了不少弯路。 |
:):):):):):) |
loop模式偏移已解决,只需获取窗口宽度,如果不是整屏的轮播,获取父级盒子的宽度即可,swiper的宽度不准,我也不知道为什么。 |
var headSwiper = new Swiper('#headbanner', { loop:true, autoplay:8000, speed:500, autoplayDisableOnInteraction:false, onlyExternal:true,//无法拖动 onInit: function(swiper){ var wid = $(window).width(); swiper.setWrapperTranslate('-'+wid); }, onAutoplay: function(swiper){ swiper.update() var wid = swiper.width var index = swiper.activeIndex swiper.setWrapperTranslate('-'+index*wid); } }); |
yymmm 发表于 2018-9-21 13:46 亲,解决了,你看看我后面发的,看能否帮到你。 |
献丑了,此贴就此算是完结了,第一次发帖,有点紧张。。。 |
Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号 )
GMT+8, 2024-5-6 13:57 , Processed in 0.085144 second(s), 36 queries .
Powered by Discuz! X3.2
© 2001-2013 Comsenz Inc.