vue中允许你继续使用swiper的组件 vue-awesome-swiper---切图网

swiper是一个在切图中好用到不行的图片轮播插件，包括3d轮播、h5滑屏等复杂应用都不在话下，到了vue项目一切逻辑完全颠覆了，没有获取dom的概念，还好有 vue-awesome-swiper组件，让我们可以无缝的继续使用swiper。如果没记错的话vue-awesome-swiper基于swiper3.x 开发得来。

1.npm安装

npm install vue-awesome-swiper –save

2.main.js全局安装

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */) 

3.组件里调用

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } } 

4、缩略图（普通的swiper很简单，网上有很多可以借鉴 我备注一下缩略图的）
template中

class="swiper-box" style="height: 500px">  :options="swiperOptionTop" class="gallery-top" ref="swiperTop"> class="slide-1">> class="slide-2">> class="slide-3">> class="slide-4">> class="slide-5">> 
class="swiper-button-next swiper-button-white" slot="button-next">> 
class="swiper-button-prev swiper-button-white" slot="button-prev">> >  :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs"> class="slide-1">> class="slide-2">> class="slide-3">> class="slide-4">> class="slide-5">> > > 

data中定义

data() {
return { swiperOptionTop: { spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } }, swiperOptionThumbs: { spaceBetween: 10, centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true } } }, 

mounted中

mounted() {
this.$nextTick(() => { const swiperTop = this.$refs.swiperTop.swiper const swiperThumbs = this.$refs.swiperThumbs.swiper swiperTop.controller.control = swiperThumbs swiperThumbs.controller.control = swiperTop }) } 

style部分