swiper 8.0在vue中自动轮播效果的实现

页面效果：

 

1.安装swiper

?

1	npm install swiper

2.引入组件

?

1	import { Autoplay } from 'swiper'

3.使用组件

?

1	modules: [Autoplay],

4.轮播图代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<swiper           :slides-per-view="1.5"           :space-between="-10"           :centeredSlides="true"           :centeredSlidesBounds="true"           :autoplay="{             delay: 1500,             disableOnInteraction: false           }"           :modules="modules"           :loop="true"           v-if="swiperOneData.length"         >           <swiper-slide v-for="(item, index) of swiperOneData" :key="index" @click="toInfo(item)">             <img               :src="item.coverImagesList.length ? item.coverImagesList[0].url : require('@/assets/images/default.jpg')"               alt=""               srcset=""             />             <p class="slide-title hidden">{{ item.title }}</p>           </swiper-slide>         </swiper>

5.未激活页面显示

?

1 2 3 4 5 6 7

.swiper-slide-prev {       transform: scale(0.8);     }       .swiper-slide-active {       z-index: 999 !important;     }