Swiper中文论坛

标题: swiper-slide位置偏移 [打印本页]

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

1537499246(1).jpg (38.93 KB, 下载次数: 924)

1537499219(1).jpg (622.95 KB, 下载次数: 936)

1537499166(1).jpg (117.82 KB, 下载次数: 947)

作者: 前端初学者 时间: 2018-9-21 11:23
试过不用打包工具，这个问题就没有，因此我认为是打包工具造成的

作者: 前端初学者 时间: 2018-9-21 11:25
slidesOffsetBefore，这个属性试过了，设置偏移量，也没有用。给width赋值为
function getWidth(){
$(window).on("load",function(){
return window.innerWidth;
})
$(window).on("resize",function(){
return window.innerWidth;
})
}
希望可以解决自适应的问题的，结果还是不行，，，

作者: 前端初学者 时间: 2018-9-21 11:27
瞎折腾了一通，有点怀疑人生了。。。

作者: yymmm 时间: 2018-9-21 13:46
和你遇到了同一个问题请问你的解决了吗

作者: 前端初学者 时间: 2018-9-21 13:49

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

没有啊~！！！找了两天解决方案了，没找着。之前是自己写的轮播图，不能拖拽滑动！这点用户体验不好，尝试着用swiper

作者: admin 时间: 2018-9-21 14:35
css设置下各级的宽度100%行不行

作者: 前端初学者 时间: 2018-9-21 14:50

admin 发表于 2018-9-21 14:35
css设置下各级的宽度100%行不行

.swiper-container{
width: 100% !important;
.swiper-wrapper{
width: 100% !important;
.swiper-slide{
width: 100% !important;
img{
width: 100%;
不行的，一开始就试过，再试了一次，只有slide设置100%有影响，但是左边又向右偏移了。。。

作者: 前端初学者 时间: 2018-9-21 14:52

admin 发表于 2018-9-21 14:35
css设置下各级的宽度100%行不行

宽度还是没有100%，设了也没用

作者: 前端初学者 时间: 2018-9-21 15:15

admin 发表于 2018-9-21 14:35
css设置下各级的宽度100%行不行

抱歉，设置宽度100%是有效的，由于我初始索引调的是1，才又导致了偏移，刚才没看出来。导致偏移的原因是slide的translate的距离和slide的宽度不一致，稍微小了一些，这样越往后滑偏移就越大，我不知道上哪改‘滑动距离’，使其和slide的宽度一致。

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

作者: 前端初学者 时间: 2018-9-21 16:22
上面的setWrapperTransition这个api起作用了，
mySwiper.onResize()这个api放在里面，拉伸屏幕，重新获取的宽度width还是没变，不是说能从新计算么？

作者: 前端初学者 时间: 2018-9-21 18:42
经过不断尝试，不断看文档终于有点收获。。。
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时，初始的状态有偏移，滑动之后偏移才消失。
我不知道我遇到的情况属于特殊还是普遍出现的，总之努力了一番，献上代码，希望能帮到遇到同样问题的人吧！

作者: 前端初学者 时间: 2018-9-21 18:45
献丑了，此贴就此算是完结了，第一次发帖，有点紧张。。。

作者: 前端初学者 时间: 2018-9-21 18:46

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

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

作者: 前端初学者 时间: 2018-9-30 18:04
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-30 18:07
loop模式偏移已解决，只需获取窗口宽度，如果不是整屏的轮播，获取父级盒子的宽度即可，swiper的宽度不准，我也不知道为什么。

作者: 前端初学者 时间: 2018-11-8 16:01
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
有没有swiper用的熟的大牛指点一下下啊

挺难受的，总是遇到各种问题，然后瞎折腾。。。

作者: viki719632790 时间: 2019-1-8 17:27

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

作者: 前端初学者 时间: 2019-1-21 17:26

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

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

作者: xby153888070 时间: 2019-4-26 17:50
兄弟，你qq多少，请教一下你怎么解决的？

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)