vue中輪播圖插件--vue-awesome-swiper

vue有本身的輪播插件，vue-awesome-swiper，  不用vue的話下載swiper插件，使用vue框架最好用vue本身的輪播插件

1.  下載     npm install vue-awesome-swiper --save-dev

2.   main.js中引入css       import 'swiper/dist/css/swiper.css'

3.   組件中使用

　js：

　 import {   swiper,  swiperSlide    }    from   'vue-awesome-swiper';

　components:  {

　　swiper,

　　swiperSlide

　}

　data ()  {

　　return {

　　　　swiperOption:  {

　　　　　//  swiper  版本區分了組件和普通版本，因此pagination，autoplay要這樣寫，不然會致使控制點不顯示

　　　　　pagination:  {

　　　　　　el:  '.swiper-pagination'

　　　　　},

　　　　　autoplay:  {

　　　　　　delay:  1000

　　　　　},

　　　　　loop:  true

　　　　}

　　}

　}

　

　html：

　<template>

　　<div class="container">

　　　<swiper :options="swiperOption">

　　　　<swiper-slide><img  src="1.jpg"  alt=""></swiper-slide>

　　　　<swiper-slide><img  src="1.jpg"  alt=""></swiper-slide>

　　　　<swiper-slide><img  src="1.jpg"  alt=""></swiper-slide>

　　　　<!--    控制點    ---    不要寫錯位置，寫錯位置不出現控制點   -->

　　　　<div class="swiper-pagination"></div>

　　　</swiper>

　　</div>

　</template>

 

更爲詳細

https://www.cnblogs.com/stephentian/p/8344258.html