1. 程式人生 > >vue-awesome-swiper 的安裝和使用

vue-awesome-swiper 的安裝和使用

安裝:最好用:cnpm install vue-awesome-swiper --save。用npm太慢會卡死。

引用:

 /*全域性引入*/
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'//這裡注意具體看使用的版本是否需要引入樣式,以及具體位置。
    Vue.use(VueAwesomeSwiper, /* { default global options } */)
  /*元件方式引用*/
    import 'swiper/dist/css/swiper.css'////這裡注意具體看使用的版本是否需要引入樣式,以及具體位置。
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
    components: {
      swiper,
      swiperSlide
    }

使用:

 <swiper :options="swiperOption">
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    </swiper>
    <!--以下看需要新增-->
    <div class="swiper-scrollbar"></div> //滾動條
    <div class="swiper-button-next"></div> //下一項
    <div class="swiper-button-prev"></div> //上一項
    <div class="swiper-pagination"></div> //標頁碼
 data() {
    return {
      swiperOption: {
        notNextTick: true,
        autoplay: true,
        speed: 1000,
        loop: true
      },
    };
  },
 components: {
    swiper,
    swiperSlide
  },