vue导入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
  }
}

**

配置

**

template:

<swiper :options="swiperOption">
    <swiper-slide>I'm Slide 1swiper-slide>
    <swiper-slide>I'm Slide 2swiper-slide>
    <swiper-slide>I'm Slide 3swiper-slide>
    <div class="swiper-pagination"  slot="pagination">div>
  swiper>

script:

 data(){
    return{
        swiperOption: {
          pagination:{
            el:'.swiper-pagination'
          },
          autoplay:{
              delay:1000,
              disableOnInteraction:false
          }
          swiper参数
      }
    }
  }

你可能感兴趣的:(vue,swiper)