Vue輪播圖插件---Vue-Awesome-Swiper

輪播圖插件
Vue-Awesome-Swiper
地址：https://github.com/surmon-china/vue-awesome-swiper
安裝：npm install vue-awesome-swiper --save
局部引入：
		import 'swiper/dist/css/swiper.css'
		import { swiper, swiperSlide } from 'vue-awesome-swiper'

		export default {
  			components: {
    				swiper,
    				swiperSlide
  			}
		}
全局引入：
import Vue from 'vue'
		  import VueAwesomeSwiper from 'vue-awesome-swiper'
		  import 'swiper/dist/css/swiper.css'

		  Vue.use(VueAwesomeSwiper, /* { default global options } */)

 

使用方法：

<swiper :options="swiperOption">
     <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
     <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
     <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
</swiper>

<!--以下看需要添加--> <div class="swiper-scrollbar"></div> //滾動條 <div class="swiper-button-next"></div> //下一項 <div class="swiper-button-prev"></div> //上一項 <div class="swiper-pagination"></div> //標頁碼

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    data(){
        return {
            //設置屬性
            swiperOption:{
                //顯示分頁
                pagination: {
                    el: '.swiper-pagination',
                    clickable:true
                },
                //切換模式  橫屏或者豎屏
                // direction : 'vertical',
                //設置自動播放速度
                autoplay: {
                    disableOnInteraction: false,
                    delay:4000
                },
                //開啟無限循環
                loop:true,
                //設置點擊箭頭
                paginationClickable :true,
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next',
                //設置同屏顯示的數量，默認為1，使用auto是隨意的意思。
                slidesPerView:1,
                //開啟鼠標滾輪控制Swiper切換。可設置鼠標選項，或true使用默認值。
                mousewheel:true ,
                //默認為false，普通模式：slide滑動時只滑動一格，並自動貼合wrapper，設置為true則變為free模式，slide會根據慣性滑動可能不止一格且不會貼合。
                // freeMode:true 
            }
        }
    },
    components:{
        swiper,
        swiperSlide
    }
}   
</script>