vue vue-awesome-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'(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>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</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>

script：

export default {
    data() {
      return {
        swiperOption: {
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    },
    ...
  }

 

所有的参数同 swiper 官方 api 参数一样 

详细参数说明可参照 ：https://github.com/surmon-china/vue-awesome-swiper