Vue中swiper怎么使用

第一步安装依赖文件

npm i swiper@5 --save npm i vue-awesome-swiper@3 --save

第二步 全局安装swiper

在main.js里面操作：

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.css'

/* 使用Vue.use来注册一个轮播图插件 */

Vue.use(VueAwesomeSwiper)

第三步 在自己建好的swiper组件中

  <div id="app">

    <swiper ref="mySwiper" :options="swiperOptions">

    <swiper-slide> Slide 1 </swiper-slide>

      <swiper-slide> Slide 2 </swiper-slide>

      <swiper-slide>Slide 3</swiper-slide>

      <swiper-slide>Slide 4</swiper-slide>

      <swiper-slide>Slide 5</swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>

    </swiper>

  </div>

  data() {

    return {

      swiperOptions: {

        pagination: {

          el: ".swiper-pagination",

        },

      },

    };

  },

  computed: {

    swiper() {

      return this.$refs.mySwiper.$swiper;

    },

  }