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

 

 

委任爲