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)
}