vue-awesome-swiper 插件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Swiper 版本区分了组件和普通版本

（1）npm install vue-awesome-swiper –save

（2）在 main,js 里引入（全局）:

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

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

（3）组件里引入 :

import ‘swiper/dist/css/swiper.css’ //在全局没引入，这里记得要！

import { swiper, swiperSlide } from ‘vue-awesome-swiper’

export default {

  components: {

    swiper,

    swiperSlide

  }

}

配置

（4）template

<swiper :options="swiperOption">

    <swiper-slide>I'm Slide 1</swiper-slide>

    <swiper-slide>I'm Slide 2</swiper-slide>

    <swiper-slide>I'm Slide 3</swiper-slide>

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

（5）数据

 data(){

    return{

        swiperOption: {

          pagination:{

            el:'.swiper-pagination'

          },

          autoplay:{

              delay:,

              disableOnInteraction:false

          }

          swiper参数

      }

    }

  }