vue项目轮播图的实现

利用   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>

 

 
posted @ 2019-10-23 21:08  leahtao  阅读(3846)  评论(0)  编辑  收藏  举报