swiper-slide位置偏移

前端初学者

经过不断尝试，不断看文档终于有点收获。。。
var mySwiper = new Swiper('#my_swiper',{
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next',
                initialSlide:0,
                autoplay:3000,
                onAutoplay: function(swiper){
                        swiper.update()
                        var wid = swiper.width
                        var index = swiper.activeIndex
                        swiper.setWrapperTranslate('-'+index*wid);
                }
        })
        $(".swiper-button-next").on("click",function(){
                mySwiper.update()
                var wid = mySwiper.width
                var index = mySwiper.activeIndex
                mySwiper.setWrapperTranslate('-'+index*wid);
        })
css：
.swiper-container{
                width: 100% !important;
                .swiper-wrapper{
                        width: 100% !important;
                        .swiper-slide{
                                width: 100% !important;
                                img{
                                        width: 100%;
css反括号没复制进来，因为下面还有东西。
以上代码还不够完善，当loop设为true时，初始的状态有偏移，滑动之后偏移才消失。
我不知道我遇到的情况属于特殊还是普遍出现的，总之努力了一番，献上代码，希望能帮到遇到同样问题的人吧！

前端初学者

献丑了，此贴就此算是完结了，第一次发帖，有点紧张。。。

前端初学者

yymmm 发表于 2018-9-21 13:46
和你遇到了同一个问题 请问你的解决了吗

亲，解决了，你看看我后面发的，看能否帮到你。

前端初学者

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);
                        }
                });

前端初学者

loop模式偏移已解决，只需获取窗口宽度，如果不是整屏的轮播，获取父级盒子的宽度即可，swiper的宽度不准，我也不知道为什么。

前端初学者

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用的熟的大牛指点一下下啊挺难受的，总是遇到各种问题，然后瞎折腾。。。

前端初学者

viki719632790 发表于 2019-1-8 17:27

你这笑容！！感觉被鄙视了呢！！
现在用起来好多了~
就是container的名字自己取一个，不用模板里面的，然后就没出现过问题了，分页，左右切换放在container里面，就不需要绑定事件来点击切换了！
现在看看这帖子我自己也觉得很好笑，当时真的走了不少弯路。