vue轮播图插件vue-awesome-swiper与swiper4.0版本相似的使用

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

一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper4.X相似。

1、安装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

 

 

委任为