swiper-slide位置偏移

查看数: 16814 | 评论数: 21 | 收藏 0
关灯 | 提示:支持键盘翻页<-左 右->
    组图打开中,请稍候......
发布时间: 2018-9-21 11:16

正文摘要:

我用的webpack打包swiper3之后,swiper-slide的宽度没有达到swiper的宽度,从 alert(mySwiper.width)  弹出的值可确认这一点,导致slide的位置有偏移,没有占满整个屏幕,附件中有图片,使用了width属性之 ...

回复

前端初学者 发表于 2018-11-8 16:01:41
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);
        })
相对完善的一个案例,记录一下面条代码,不懂优化,唉~
前端初学者 发表于 2018-11-8 16:04:06
有没有swiper用的熟的大牛指点一下下啊挺难受的,总是遇到各种问题,然后瞎折腾。。。
xby153888070 发表于 2019-4-26 17:50:08
兄弟,你qq多少,请教一下你怎么解决的?
前端初学者 发表于 2019-1-21 17:26:49

你这笑容!!感觉被鄙视了呢!!
现在用起来好多了~
就是container的名字自己取一个,不用模板里面的,然后就没出现过问题了,分页,左右切换放在container里面,就不需要绑定事件来点击切换了!
现在看看这帖子我自己也觉得很好笑,当时真的走了不少弯路。
viki719632790 发表于 2019-1-8 17:27:21
:):):):):):)
前端初学者 发表于 2018-9-30 18:07:32
loop模式偏移已解决,只需获取窗口宽度,如果不是整屏的轮播,获取父级盒子的宽度即可,swiper的宽度不准,我也不知道为什么。
前端初学者 发表于 2018-9-30 18:04:58
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);
                        }
                });
前端初学者 发表于 2018-9-21 18:46:42
yymmm 发表于 2018-9-21 13:46
和你遇到了同一个问题 请问你的解决了吗

亲,解决了,你看看我后面发的,看能否帮到你。
前端初学者 发表于 2018-9-21 18:45:01
献丑了,此贴就此算是完结了,第一次发帖,有点紧张。。。

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.

快速回复 返回顶部 返回列表