nuxtProject/components/swiper.vue

<template>
    <div class="swiper-page">
      <div v-swiper:mySwiper="swiperOption" class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, idx) in swiperData" :key="idx">
            <img :src="item.imgUrl" />
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-style"></div>
      </div>
    </div>
</template>
<script>
  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
  Swiper.use([Navigation, Pagination,Autoplay]);
  export default {
    data() {
      return {
        swiperData: [
          { imgUrl: require(`~/static/images/client/index/index-products-kaoshi.png`)},
          { imgUrl: require(`~/static/images/client/index/index-products-peixun.png`) },
          { imgUrl: require(`~/static/images/client/index/index-products-kejian.png`) },
        ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
            clickable: true, // 点击当前滑块切换到对应的轮播图片
          },
          autoplay: {
            delay: 2000,
          },
          paginationClickable: true,
          speed: 800,
          loop: true,
          observer: true,
          observeParents: true,
          autoplayDisableOnInteraction: false,
        },
      }
    },
  }
</script>

<style lang="scss">
  .swiper-page {
    position: relative;
    .swiper-slide {
      width: 760px;
      height: 440px;
      // box-shadow: 0 0 30px 3px rgba(77, 97, 140, 0.4);
      img {
        width: 760px;
        height: 440px;
      }
    }
    .swiper-pagination-style {
      position: absolute;
      left: 60px;
      bottom: 39px;
      width: 300px;
      .my-bullet-swiper {
        display: inline-block;
        width: 46px;
        height: 6px;
        background: #9b9bb6;
        margin-right: 14px;
      }
      .my-bullet-active-swiper {
        background: #ffd18e;
      }
    }
  }
</style>

<!--
<SwiperCmp :list="banners" :isPagination="true" :className="'swiperClass'" :paginationType="bullets"/>
import SwiperCmp from  '../components/swiper.vue'
components:{SwiperCmp},
-->