利用 Vue-Awesome-Swiper插件來做輪播效果，github地址：https://github.com/surmon-china/vue-awesome-swiper
安裝
npm install vue-awesome-swiper --save
頁面中引用
import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper'
代碼如下：
1 <template>
2 <div class="wrapper">
3 <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
4 <!-- slides -->
5 <swiper-slide v-for="item of swiperList" :key="item.id">
6 <img class="swiper-img" :src="item.url" alt="">
7 </swiper-slide>
8 <!-- Optional controls -->
9 <div class="swiper-pagination" slot="pagination"></div>
10 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
11 <div class="swiper-button-next" slot="button-next"></div> 左右箭頭-->
12 </swiper>
13 </div>
14 </template>
15
16 <script>
17 export default { 18 name: 'HomeSwiper', 19 data () { 20 return { 21 swiperOption: { 22 pagination: '.swiper-pagination', 23 loop: true //循環輪播
24 }, 25 swiperList: [{ 26 id: '001', 27 url: 'https://imgs.qunarzz.com/vs_ceph_vs_tts/fb5fbf5c-4f85-482b-91d6-4ce17a42618d.jpg_r_390x260x90_aae85edf.jpg'
28 }, { 29 id: '0002', 30 url: 'https://imgs.qunarzz.com/sight/p0/1411/34/6aec007588037c2d9ef339d81aeba256.water.jpg_256x160_ec997312.jpg'
31 }] 32 } 33 } 34 } 35 </script>
36
37 <style scoped>
38 .wrapper >>> .swiper-pagination-bullet-active { 39 background: red; 40 } 41 .swiper-img { 42 width: 100%
43 } 44 .wrapper { 45 overflow: hidden; 46 width: 100%; 47 height: 0; 48 padding-bottom: 31.25% /*相對於寬高比自動撐開 */
49 /* width:100%; 50 height: 31.25vw; 除了上面那種方法，也可以這么寫，意思是寬高比例*/
51 } 52 </style>