vue2 + swiper.js

》swiper 使用的 9.2.0版本

<template>
    <div
        v-show="gridInfoList.length > 0"
        class="swiper"
     >
        <div class="swiper-wrapper">
            <GridMember
                v-for="(item, index) in gridInfoList"
                :key="index"
                class="swiper-slide"
                :gridInfo="item"
            />
        </div>
        <div class="swiper-pagination" />
    </div>
</template>

<script lang="javascript">
import Swiper, { Autoplay, Pagination } from 'swiper';
import 'swiper/swiper.scss';
import 'swiper/modules/pagination/pagination.scss';


mounted () {
    // 这里要注意，swiper 容器的类名必须用 swiper
    new Swiper('.swiper', {
        speed: 500,
        spaceBetween: 50,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
            pauseOnMouseEnter: true
        },
        /** 
          这里是你需要引入的一些功能，自动轮播、小圆点分页符、左右切换按钮，同时需要引入对应的样式。
          自动轮播不需要单独引入样式
        */
        modules: [Autoplay, Pagination], 
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
        }
    });
}
</script>