[VUE插件系列] - Vue-Awesome-Swiper轮播组件

• 安装插件

npm install vue-awesome-swiper

• 引入vue-quill-editor库

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

• 如何使用

<template>  
    <div class="quill">    
       <h1>vue-awesome-swiper</h1>       
       <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">         
         <!-- slides -->         
         <swiper-slide>I'm Slide 1</swiper-slide>         
         <swiper-slide>I'm Slide 2</swiper-slide>         
         <swiper-slide>I'm Slide 3</swiper-slide>         
         <swiper-slide>I'm Slide 4</swiper-slide>         
         <swiper-slide>I'm Slide 5</swiper-slide>         
         <swiper-slide>I'm Slide 6</swiper-slide>         
         <swiper-slide>I'm Slide 7</swiper-slide>         
         <!-- Optional controls -->         
         <div class="swiper-pagination"  slot="pagination"></div>         
         <div class="swiper-button-prev" slot="button-prev"></div>         
         <div class="swiper-button-next" slot="button-next"></div>         
         <div class="swiper-scrollbar"   slot="scrollbar"></div>    
      </swiper>    
    </div>
</template>

<script>
export default {  
    data () {    
        return {      
            swiperOption: {}          
        }  
    },
    computed: {        
        swiper () {        
            return this.$refs.mySwiper.swiper        
        }    
    },    
    mounted () {        
        this.swiper.slideTo(3, 1000, false)    
    }
}
</script>

Vue-Awesome-Swiper 基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。

如果需要回退到 Swiper3，请使用 v2.6.7 版本。

github地址:  github.com/surmon-chin…