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

转载于:https://www.cnblogs.com/lgl1209/p/10334322.html