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：

        Slide 1
        Slide 2
        Slide 3
        Slide 4
        Slide 5
        Slide 6
        Slide 7
        Slide 8
        Slide 9
        Slide 10
        

        

        

      

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