vue-awesome-swiper自动轮播可以同时显示3张图片
时间: 2023-11-02 08:03:21 浏览: 166
自定义viewpager 三张图片在同一屏幕轮播的效果
5星 · 资源好评率100%
是的,vue-awesome-swiper可以通过设置slidesPerView属性来控制同时显示多少张图片。以下是一个示例代码:
```
<template>
<swiper :options="swiperOption">
<swiper-slide v-for="(item, index) in list" :key="index">
<img :src="item.imgUrl" alt="">
</swiper-slide>
</swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
list: [
{ imgUrl: 'https://picsum.photos/id/1018/400/300' },
{ imgUrl: 'https://picsum.photos/id/1015/400/300' },
{ imgUrl: 'https://picsum.photos/id/1019/400/300' },
{ imgUrl: 'https://picsum.photos/id/1020/400/300' },
{ imgUrl: 'https://picsum.photos/id/1021/400/300' }
],
swiperOption: {
loop: true,
autoplay: {
delay: 3000
},
slidesPerView: 3, // 设置同时显示3张图片
spaceBetween: 30
}
}
}
}
</script>
```
在上述代码中,我们通过设置slidesPerView属性为3来控制同时显示3张图片。同时,我们还设置了循环播放和自动播放等其他选项。
阅读全文