vue-cli用swiper插件

官網：https://www.npmjs.com/package/vue-awesome-swiper

安裝：

npm install vue-awesome-swiper --save

main.js引入；

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// require styles
import 'swiper/dist/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default global options } */)

下面舉例子介紹使用方法：

展示效果是：

<swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide>
            <div class="item item_01">
              <img class="bg" src="./../assets/images/jieshao_list1.png" alt="" srcset="">
              <img class="img_01" src="./../assets/images/jjfa_jdsfcb.png" alt="" srcset="">
              <p class="ft20 p_01">降低司法成本</p>
              <div class="item_0">
                <img src="./../assets/images/jjfa_jdsfcb.png" alt="" srcset="">
                <p class="ft20">降低司法成本</p>
                <p class="con">LegalXChain聯盟鏈的合約記錄在賬本上。無論事件有任何意義，合約都被看作是強有力的證據，並具有法律約束力。</p>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="item item_02 swiper-slide">
              <img class="bg" src="./../assets/images/jieshao_list2.png" alt="" srcset="">
              <img class="img_02" src="./../assets/images/jieshao_sjgd.png" alt="" srcset="">
              <p class="ft20 p_02">打破數據孤島</p>
              <!-- <div class="item_0">
            <img src="./../assets/images/jjfa_jdsfcb.png" alt="" srcset="">
            <p class="ft20">降低司法成本</p>
            <p class="con">LegalXChain聯盟鏈的合約記錄在賬本上。無論事件有任何意義，合約都被看作是強有力的證據，並具有法律約束力。</p>
          </div> -->
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="item item_03 swiper-slide">
              <img class="bg" src="./../assets/images/jieshao_list3.png" alt="" srcset="">
              <img src="./../assets/images/jieshao_tsxl.png" alt="" srcset="">
              <p class="ft20">提升維權效率</p>
              <!-- <div class="item_0">
            <img src="./../assets/images/jjfa_jdsfcb.png" alt="" srcset="">
            <p class="ft20">降低司法成本</p>
            <p class="con">LegalXChain聯盟鏈的合約記錄在賬本上。無論事件有任何意義，合約都被看作是強有力的證據，並具有法律約束力。</p>
          </div> -->
            </div>
          </swiper-slide>

          <swiper-slide>
            <div class="item item_04 swiper-slide">
              <img class="bg" src="./../assets/images/jieshao_list4.png" alt="" srcset="">
              <img src="./../assets/images/jjfa_zxsj.png" alt="" srcset="">
              <p class="ft20">引領司法服務轉型升級</p>
            </div>
            <!-- <div class="item item_05">
          <img class="bg" src="./../assets/images/jieshao_list5.png" alt="" srcset="">
          <img src="./../assets/images/jjfa_axxl.png" alt="" srcset="">
          <p class="ft20">提高全社會契約執行效率</p>
        </div> -->
          </swiper-slide>
          <swiper-slide>
            <div class="item item_04 swiper-slide">
              <img class="bg" src="./../assets/images/jieshao_list5.png" alt="" srcset="">
              <img src="./../assets/images/jjfa_axxl.png" alt="" srcset="">
              <p class="ft20">提高全社會契約執行效率</p>
            </div>
            <!-- <div class="item item_05">
          <img class="bg" src="./../assets/images/jieshao_list5.png" alt="" srcset="">
          <img src="./../assets/images/jjfa_axxl.png" alt="" srcset="">
          <p class="ft20">提高全社會契約執行效率</p>
        </div> -->
          </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>
          <div class="swiper-scrollbar" slot="scrollbar"></div>
        </swiper>

data() {
    return {
      //所有的參數同 swiper 官方 api 參數
      swiperOption: {
        slidesPerView: 4,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },

computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
},
mounted() {
      // current swiper instance
      // 然後你就可以使用當前上下文內的swiper對象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
}