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

页面效果：

 

1.安装swiper

npm install swiper

2.引入组件

import { Autoplay } from 'swiper'

3.使用组件

modules: [Autoplay],

4.轮播图代码

<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.未激活页面显示

.swiper-slide-prev {
      transform: scale(0.8);
    }

    .swiper-slide-active {
      z-index: 999 !important;
    }