如何控制swiper中单个swiper-slider的宽度

1.在项目里遇到了这个问题，首先我们明确一下单个swiper-slider 的宽度是如何确定的

 

在swiper 的参数配置里面有一个参数：slidesPerView

var swiper = new Swiper('.swiper-container', {
slidesPerView: "auto",

pagination: {
el: '.swiper-pagination',
freeMode : false,
freeModeMomentum : true,
},
});

slidersPerView的作用是控制单屏显示的slider的数量，如果设置成数字，比如5，那单屏就会显示5个slider

现在我们设置为auto，也就是让slider的宽度自适应，宽度由内容来撑开，而正常的单个slider的宽度就是由

这个参数来确定的， 比如你的屏幕是375px的移动设备，当你吧slidesperView设置为5 时 那么单个slider的

宽度就是75px，

2.知道了单个slider的宽度设置原理，我们就可以来更改，另外写一段css 

.swiper-slide{
width: auto!important;
margin-right: 15px!important;
}

来通过权重覆盖 原有文件中swiper.css 的样式，让单个slider的宽度自适应， 然后再加一个margin值来确保

每一个slider 中间是有间距的 ，当然 swiper 中也有专门控制每个slider 之间间距的参数  这个可以自行查找。

 

3.总结下来 如果遇到了 slider 宽度不合适的bug 那么就只需要两步

第一步：设置slidesPerView: "auto",

第二部：设置.swiper-slide{
width: auto!important;
}

这样就ok 了

转载于:https://www.cnblogs.com/shuangjiang/p/9524066.html