Swiper Carousel(轮播) - slidesPerView

设置slider容器能够同时显示的slides数量(carousel模式)。
可以设置为数字(可为小数,小数不可loop),或者 'auto'则自动根据slides的宽度来设定数量。
loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
slidesPerView: 'auto'目前还不支持多行模式(当slidesPerColumn > 1)

slidesPerView信息

  • 类型:

  • number or auto

  • 默认:

  • 1

  • 举例:

  • 2

  • 启用版本:

  • 4.0.0

效果演示

slider1
slider2
slider3
slidesPerView :2
slider1
slider2
slider3
slider4
slider5
slider6
slider7
slider8
slider9
slidesPerView :'auto'

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script> 
var mySwiper = new Swiper('.swiper',{
  slidesPerView : 2,  
//slidesPerView : 'auto',    根据slide的宽度自动调整展示数量。此时需要设置slide的宽度,如下style所示
//slidesPerView : 3.7,
})
</script>
<style>
  .swiper-slide{
    width:300px;/*设为固定值*/
    width:auto;/*根据内容调整宽度*/
  }
</style>