swiper-slide位置偏移

前端初学者

我用的webpack打包swiper3之后，swiper-slide的宽度没有达到swiper的宽度，从 alert(mySwiper.width)  弹出的值可确认这一点，导致slide的位置有偏移，没有占满整个屏幕，附件中有图片，使用了width属性之后，可以占满屏幕，但是自适应失效了，我试了很多方法都没有解决，在此怀着一点希冀，希望遇到大佬能帮我解决这个问题。。。

前端初学者

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

xby153888070

兄弟，你qq多少，请教一下你怎么解决的？

前端初学者

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

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

viki719632790

:):):):):):)

前端初学者

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
和你遇到了同一个问题 请问你的解决了吗

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

前端初学者

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