vue轮播图

第一步：

安装依赖
npm i swiper@5 --save

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

 

第二步：

全局安装

在main.js里面操作：

import VueAwesomeSwiper from 'vue-awesome-swiper'

 

/* 在node_modules里面找到swiper文件夹里面的css文件 */

import 'swiper/css/swiper.css'

 

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

Vue.use(VueAwesomeSwiper)

★ 复制下面的代码在vscode中会出现word格式黄色空格，

需要自己删掉，建议手敲下面的代码

第三步：

在自己的组件文件夹中 新建一个轮播图组件 MySwiper.vue：

并复制以下代码到你的组件中： < template> < div id="app">

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

< swiper-slide>Slide 1

< swiper-slide>Slide 2

  < swiper-slide>Slide 3

  < swiper-slide>Slide 4

  < swiper-slide>Slide 5

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

< /swiper>

  < /div>

< /template>

< script>

export default {

  name: "App",

  data() {

    return {

      swiperOptions: {

        pagination: {

          el: ".swiper-pagination",

        },

      },

    };

  },

  computed: {

    swiper() {

      return this.$refs.mySwiper.$swiper;

    },

  }

};

< /script>

 

< style>

.swiper-container {

  width: 500px;

  height: 400px;

  border: 1px solid red;

}

< /style>

 

把组件引用到app.vue文件中去