Swiper 主要用来做轮播图（Slider）

在 Vue3 项目中使用Swiper@8.4.5

<template>
  <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in flashData"
          :key="index"
          data-swiper-autoplay="2000"
          @click="other(item.url)"
        >
          <!-- <a :href="item.url">
                        <img :src="item.pic">
          </a>-->
          <img class="imgLb" :src="item.pic" />
        </div>
      </div>
      <div class="swiper_pagination"></div>
    </div>
</template>
<script lang='ts' setup>
import Swiper, { Pagination, Autoplay } from 'swiper'
import 'swiper/css'
import 'swiper/css/pagination'
// Note: 这行代码必须要有，否则会导致轮播图无法自动播放
Swiper.use([Autoplay])

const init = () => {
  new Swiper('.swiper-container', {
    modules: [Pagination],
    // autoplay: true,
    pagination: {
      el: '.swiper_pagination',
      type: 'bullets',
      clickable: true,
    },
    autoplay: {
      delay: 2000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
    observer: true,
    observeParents: true,
    loop: true,
    loopAdditionalSlides: true,
  })
}
</script>