swiper之SLIDE自定义宽度

slidesPerView

swiper中单个slide的宽度与slidesPerView有关，它用来设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），比如设置为3，那么单屏就会显示3个slide；或者 \auto\则自动根据slides的宽度来设定数量。

如果需要自定义slide的宽度，那么一定需要设置slidesPerView为auto。

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>

<script>
var swiper = new Swiper(\.swiper-container\);
</script>

html, body {
position: relative;
height: 100;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100;
height: 100;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: 80;

.swiper-slide:nth-child(2n) {
width: 60;
}
.swiper-slide:nth-child(3n) {
width: 40;
}

<script>
var swiper = new Swiper(\.swiper-container\, {
slidesPerView: \auto\,
spaceBetween: 30,
});
</script>

此时，就可以对单个slide进行自定义宽度了。

打赏

感谢支持与鼓励～