swiper-slide位置偏移

前端初学者

$(".swiper-button-next").on("click",function(){
                        mySwiper.setWrapperTransition('-'+mySwiper.width);
                        console.log(mySwiper.width)
                        console.log(mySwiper.translate);
                })
设置滑动距离这个api有效吗，为什么我设置了没用呢？？？使用方法不对嘛？？？
1220
-1204
以上是一组输出值。

前端初学者

上面的setWrapperTransition这个api起作用了，
mySwiper.onResize()这个api放在里面，拉伸屏幕，重新获取的宽度width还是没变，不是说能从新计算么？

前端初学者

经过不断尝试，不断看文档终于有点收获。。。
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

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