slidesPerView
设置slider容器能够同时显示的slides数量(carousel模式)。
可以设置为数字(可为小数,小数不可loop),或者 'auto'则自动根据slides的宽度来设定数量。
loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
slidesPerView: 'auto'目前还不支持多行模式(当slidesPerColumn > 1)
可以设置为数字(可为小数,小数不可loop),或者 'auto'则自动根据slides的宽度来设定数量。
loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
slidesPerView: 'auto'目前还不支持多行模式(当slidesPerColumn > 1)
slidesPerView信息
- 类型:
- number or auto
- 默认:
- 1
- 举例:
- 2
- 启用版本:
- 4.0.0
使用方法示例
从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>
转载原创文章请注明:文章转载自:Swiper中文网 [https://www.swiper.com.cn]
本文地址:https://www.swiper.com.cn/api/carousel/24.html