在 Vue 中使用 Swiper ( vue-awesome-swiper )

# 介绍

Swiper 是纯 javascript 打造的滑动特效插件，面向手机、平板电脑等移动终端。可实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

# 第一步: 安装

npm install swiper vue-awesome-swiper --save

# 第二步: 引用

1. 全局引用

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

Vue.use(VueAwesomeSwiper)

2. 组件内引用

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
 components: { Swiper, SwiperSlide },
 directives: { swiper: directive }
}

# 第三步: 使用

1. 组件形式

部分 API

2. 指令形式

部分 API

export dafault {
  data() {
    return {
      dynamicSwiperName: 'thirdSwiper'
    }
  },
  mounted() {
    console.log('Swiper instances:',
    this.$swiper, this.secondSwiper, this.thirdSwiper, this.fourthSwiper)
  }
}

更多详细内容可参照 swiper Github , 希望能帮到你~