1.安裝：npm install vue-awesome-swiper --save
2.在main.js里面引入
// 引入輪播圖插件
import Vue from 'vue'
import vueSwiper from 'vue-awesome-swiper'
/* 樣式的話功蜓，我這里有用到分頁(yè)器趟脂，就在全局中引入了樣式 */
import 'swiper/dist/css/swiper.css'
Vue.use(vueSwiper);
3.在具體頁(yè)面引入
import?HelloWorld from ‘@/HelloWorld’
在Vue實(shí)例對(duì)象里面注冊(cè)組件 componts:{
HelloWorld
}
4.具體代碼
<template>
? <swiper :options="SwiperOptions">
? ? <swiper-slide v-for="(item,index) of commodity" :key="'commodity' + index ">
? ? ? <div style="height:100px">
? ? ? ? <img src=item />
? ? ? </div>
? ? </swiper-slide>
? ? <div class="swiper-pagination" slot="pagination"></div>
? </swiper>
</template>
<script>
export default {
? name: "HelloWorld",
? data() {
? ? return {
? ? ? SwiperOptions: {//滾動(dòng)頁(yè)配置
? ? ? ? autoplay: {//自動(dòng)滾動(dòng)配置
? ? ? ? ? delay: 1500,
? ? ? ? ? stopOnLastSlide: false,
? ? ? ? ? disableOnInteraction: false
? ? ? ? },
? ? ? ? slidesPerView: "auto",//一頁(yè)顯示幾個(gè)
? ? ? ? freeMode: true,
? ? ? ? observer: true, //修改swiper自己或子元素時(shí)名船，自動(dòng)初始化swiper
? ? ? ? observeParents: true, //修改swiper的父元素時(shí)硝烂，自動(dòng)初始化swiper
? ? ? ? pagination: { //指示器配置
? ? ? ? ? el: ".swiper-pagination"
? ? ? ? }
? ? ? },
? ? ? commodity: [
? ? ? ? "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",
? ? ? ? "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",
? ? ? ? "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",
? ? ? ? "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",
? ? ? ? "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg"
? ? ? ]
? ? };
? }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- 修改指示器屬性 -->
<style scoped>
.swiper-pagination-bullet-active {
? opacity: 1;
? background: #aeaeae !important;
}
.swiper-pagination-bullet {
? width: 4px !important;
? height: 4px !important;
? display: inline-block;
? border-radius: 100%;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
? bottom: -2px;
}
</style>
