先上效果图

template

<template>
  <div>
    <div class="swiper-content">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../../assets/images/home/bz2.png" alt="" srcset="" />
          </div>
          <div class="swiper-slide">
            <img src="../../assets/images/home/bz2.png" alt="" srcset="" />
          </div>
          <div class="swiper-slide">
            <img src="../../assets/images/home/bz2.png" alt="" srcset="" />
          </div>
        </div>
        <!-- Add Pagination -->
        <!-- <div class="swiper-pagination"></div> -->
        <!-- <div class="swiper-button-prev"></div> -->
        <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <!-- <div class="swiper-button-next"></div> -->
        <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
      </div>
    </div>
  </div>
</template>

script

<script setup>
  import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'
  import { useRoute } from 'vue-router'
  import { TH07 } from '@/api/home'
  // import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需组件
  // import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from 'swiper' // 分页器
  // import 'swiper/swiper-bundle.css'
  import '@/assets/styles/swiper.min.css'
  import Swiper from '@/assets/js/swiper.min.js'
  // const modules = [Autoplay, Pagination, Navigation, A11y]
  const route = useRoute()
  const id = route.query.id
  const data = reactive({
    images: [
      {
        image: require('../../assets/images/home/bz2.png'),
      },
      {
        image: require('../../assets/images/home/bz2.png'),
      },
      {
        image: require('../../assets/images/home/bz2.png'),
      },
      {
        image: require('../../assets/images/home/bz2.png'),
      },
      {
        image: require('../../assets/images/home/bz2.png'),
      },
      {
        image: require('../../assets/images/home/bz2.png'),
      },
    ],
    // swiperOptions: {
    //   autoplay: {
    //     delay: 3000,
    //     disableOnInteraction: false,
    //   },
    //   effect: 'coverflow',
    //   slidesPerView: 1.2,
    //   spaceBetween: 2,
    //   loopedSlides: 5,
    //   centeredSlides: true,
    //   centeredSlidesBounds: true,
    //   observer: true, //修改swiper自己或子元素时，自动初始化swiper
    //   observeParents: true, //修改swiper的父元素时，自动初始化swiper
    //   loop: true,
    // },
    // coverflowEffect: {
    //   rotate: 30,
    //   stretch: 10,
    //   depth: 60,
    //   modifier: 2,
    //   slideShadows: true,
    // },
  })

  const getList = async () => {
    const res = await TH07({
      cert_no: '11010419791222302X',
      channel: '20',
      name: '万怡珊',
      model: '92261928032828',
      bank_no: '1004',
    })
    console.log('111', res)
  }
  onMounted(() => {
    var swiper = new Swiper('.swiper-container', {
      autoplay: true,
      loop: true,
      initialSlide: 2,
      spaceBetween: 20,
      centeredSlides: true,
      slidesPerView: 1.9,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      // 如果需要分页器
      pagination: {
        // el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
    getList()
  })
  const { images, swiperOptions, coverflowEffect } = toRefs(data)
</script>

style

<style lang="scss" scoped>
  // .swiper-slide {
  //   width: 80%;
  //   height: 300px;
  //   transition: all 0.3s ease-in-out;
  // }
  // .swiper-slide-prev {
  //   transform: scale(0.8);
  // }
  // .swiper-slide-next {
  //   transform: scale(0.8);
  // }
  // .image {
  //   width: 100%;
  // }

  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-slide img {
    width: 100%;
    height: 300px;
  }
  .swiper-button-next {
    right: 16%;
    width: 30px;
    height: 30px;
  }
  .swiper-button-next:after {
    content: ' ';
    // background-image: url(./image/arrow-right.svg);
    // border: 1px solid red;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
  }
  .swiper-button-prev {
    left: 16%;
    width: 30px;
    height: 30px;
  }
  .swiper-button-prev:after {
    content: ' ';
    // background-image: url(./image/arrow-left.svg);
    // border: 1px solid red;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0;
  }
  .swiper-pagination {
    position: relative;
  }
</style>