vue-swiper

一、安装

npm install vue-awesome-swiper

二、在main.js中引入swiper.css

import "swiper/dist/css/swiper.css"

三、在需要的页面引入vue-awesome-swiper并注册

import  { swiper, swiperSlide  } from "vue-awesome-swiper"

其中：

1.swiper:充当要要滚动的外层div

2.swiperSlide：充当每个要轮播的项

四、注册组件

components:{

     swiper,

     swiperSlide

}

五、具体样式

详见GitHub（搜索vue-awesome-swiper）

例如：

swiper参数进行配置

1、在.vue组件中的data() {}中进行配置，添加

data() {

     return {

          setOption:{

               pagination:".swiper-pagination",

               autoplay:3000,

               nextButton: '.swiper-button-next',

               prevButton: '.swiper-button-prev',

               loop:true

               //需要用哪个配置哪个

          }

     }

}

2、将setOption添加到swiper指令中

<swiper :options='setOption' class='swiper-box'>

     <swiper-slide></swiper-slide>

     <swiper-slide></swiper-slide>

     <swiper-slide></swiper-slide>

     <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>

</swiper>