vue輪播圖插件vue-awesome-swiper與swiper4.0版本類似的使用

 第一種方式：vue-awesome-swiper的用法

通常作移動端輪播圖的時候，最經常使用的就是Swiper插件了，而vue.js也有一個輪播組件vue-awesome-swiper，用法跟swiper4.X類似。

一、安裝vie-awesome-swiper

npm install vue-awesome-swiper --save

2.引用vie-awesome-swiper組件，這裏我是用vie-cli建立的項目,在main.js：

import VueAwesomeSwiper from 'vue-awesome-swiper';
import '../../static/swiper.css';{若是你使用vue-awesome-swiper的是2.6.0以上的版本要本身手動去加載css}
 Vue.use(VueAwesomeSwiper) //請不要忘記這一步

第一種方式：輪播圖片

Goods.vue文件裏面

<div class="godsimg">
            <swiper :options="swiperOption" ref="oneSwiper">
                <swiper-slide v-for="val in img" key="index"><img :src="val"></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>  
            </swiper>
            
       </div>

Goods.vue中JS

import {swiper,swiperSlide} from 'vue-awesome-swiper';
import '../../static/swiper.css';
export default {
  data () {
    return {
      img:[
         '/static/images/1_img1.jpg',
         '/static/images/1_img2.jpg',
         '/static/images/1_img3.jpg',
         '/static/images/1_img4.jpg',
         '/static/images/1_img5.jpg'
      ],
      swiperOption:{
        notNextTick:true,
        pagination: {
          el: '.swiper-pagination',
          clickable:true,
          renderBullet: function (index, className) {
              var imgs=[
         '/static/images/1_img1.jpg',
         '/static/images/1_img2.jpg',
         '/static/images/1_img3.jpg',
         '/static/images/1_img4.jpg',
         '/static/images/1_img5.jpg'
      ];
              return '<span class="' + className + '"><image src="'+imgs[index]+'"></span>';
          } 
        },
        slidesPerView:'auto',
        centeredSlides:true,
        debugger: true
      }
    }
  },
  computed:{
    swiper(){
       return this.$refs.oneSwiper.swiper
    }
  },
  mounted(){
    this.swiper.slideTo(0,0,false)
  }
  components:{
    swiper,
    swiperSlide
  }
}
</script>

源文件來自：D:\www\vue_agent

 

 

委任爲