Vue仿旅游网站-首页轮播图

使用vue-awsome-swiper组件制作轮播图

1. <template>
2.  <div class="wrapper">
3.  <swiper :options="swiperOption" v-if="showSwiper" ref="mySwiper" @someSwiperEvent="callback">
4.     <!-- slides -->
5.     <swiper-slide v-for="item of list" :key="item.id">
6.        <img class="swiper-img" :src="item.imgUrl"/>
7.     </swiper-slide>
8.     <div class="swiper-pagination" slot="pagination"></div>
9.   </swiper>
10.   </div>
11. </template>
12.  
13. <script>
14.     export default {
15.         name:"HomeSwiper",
16.         props:{
17.           list:Array
18.         },
19.         data (){
20.            return{
21.             swiperOption:{
22.                pagination:".swiper-pagination",
23.                loop:true
24.             }
25.  
26.           }
27.         } ,
28.          computed: {
29.           showSwiper () {
30.           return this.list.length
31.         }
32.       }
33.     }
34.  
35. </script>
36.  
37. <style lang="stylus" scoped>
38.   .wrapper >>> .swiper-pagination-bullet-active
39.     background:#fff
40.   .wrapper
41.     overflow:hidden
42.     width:100%
43.     height 0
44.     padding-bottom:31.25%
45.     background:#eee
46.     .swiper-img
47.        width:100%
48. </style>