swiper-slide位置偏移

前端初学者 · 发表于 2018-9-21 11:16:22

我用的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用的熟的大牛指点一下下啊

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

前端初学者 · 发表于 2018-9-21 11:23:08

试过不用打包工具，这个问题就没有，因此我认为是打包工具造成的

前端初学者 · 发表于 2018-9-21 11:25:16

slidesOffsetBefore，这个属性试过了，设置偏移量，也没有用。给width赋值为
function getWidth(){
$(window).on("load",function(){
return window.innerWidth;
})
$(window).on("resize",function(){
return window.innerWidth;
})
}
希望可以解决自适应的问题的，结果还是不行，，，

前端初学者 · 发表于 2018-9-21 11:27:47

瞎折腾了一通，有点怀疑人生了。。。

yymmm · 发表于 2018-9-21 13:46:07

和你遇到了同一个问题请问你的解决了吗

前端初学者 · 发表于 2018-9-21 13:49:29

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

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

admin · 发表于 2018-9-21 14:35:25

css设置下各级的宽度100%行不行

前端初学者 · 发表于 2018-9-21 14:50:51

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:02

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

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

前端初学者 · 发表于 2018-9-21 15:15:56

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

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