vue3中swiper的使用

vue版本: "vue": "^3.2.13",

"@vue/cli-service": "~5.0.0",

"swiper": "^6.5.6",

1.安装swiper指定版本

npm install swiper@6.5.6 --save

2.在需要使用swiper的组件中引入swiper

// Import Swiper Vue.js components

import { Swiper, SwiperSlide } from "swiper/vue";

3.引入css文件

// Import style (>= Swiper 6.x)

import "swiper/swiper-bundle.css";

4.在模板文件中使用

<swiper class="swiper-container"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :pagination="{ clickable: true }"
      :autoplay="{ autoplay: true }"
      loop>
      <swiper-slide><img src="@/assets/logo.png" alt="">{{num}}</swiper-slide>
      <swiper-slide><img src="@/assets/logo.png" alt="">222</swiper-slide>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
</swiper>

5.再按需导入使用swiper中的对应的模块

import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from "swiper";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])
​
export default {
  components: {
    Swiper,
    SwiperSlide
  }
}