[VUE插件系列] - Vue-Awesome-Swiper輪播組件

時間 2019-11-07

標籤 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 的輪播組件，支持服務端渲染和單頁應用。css

若是須要回退到 Swiper3，請使用 v2.6.7 版本。vue

github地址: https://github.com/surmon-china/vue-awesome-swiper
git