vue 轮播图插件 vue-awesome-swiper

1.npm安装

npm install vue-awesome-swiper --save

2.vue 引入

//在main.js 中全局引入

import VueAwesomeSwiper from "vue-awesome-swiper";

import 'swiper/dist/css/swiper.css';

Vue.use(VueAwesomeSwiper);

3.运用

<swiper :options="swiperOptions">
    <swiper-slide>1</swiper-slide>
    <swiper-slide>2</swiper-slide>
    <swiper-slide>3</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>

export default{
  data(){
       return{
           swiperOptions:{
               slidesPerView:3,
               spaceBetween:30,
               freeMode:true,
               pagination:{
                  el:".swiper-pagination",
                  clickable:true
               },
　　　　　　　　　navigation:{
   　　　　　　  　　nextEl:".swiper-button-next",
　　　　　　　　　　　prevEl:".swiper-button-prev"
               }
            }
        }
    }
}