vue 使用 vue-awesome-swiper 轮播图

1.安装依赖

npm install swiper vue-awesome-swiper --save

2.在main.js 引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// import style
import 'swiper/css/swiper.css'

3.页面使用

<template>
  <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>
</template>
 
<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
         slidesPerView: 4.8,
         slidesPerColumn: 2,
         spaceBetween: 8,
         on: { //关键在这儿，通过点击事件拿到对应的元素，从而确定具体index，跳转对应页
             tap:function (e) {
                  //e.clickedIndex == 下标
                  var item = vm.griditem[e.clickedIndex];
                  vm.IconGo(item.id,item.title,item.url,item.type,item.imgname)
             },
         },
        }
      }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper
        }
    },
    mounted() {
      this.swiper.slideTo(3) // 点击自定义事件切换
    }，
    methods: {
        /* 图标的跳转 */
        IconGo(id,title,url,type,imgname) {
            this.$router.push({
                  path: '/Commontemplate',
                  query:{
                      title:title,
                      activity_id:id,
                  }
            });
        }
     }
  }