vue项目轮播图的实现
Posted lyt0207
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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‘
代码如下：
<template>
<div class="wrapper">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.url" >
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> 左右箭头-->
</swiper>
</div>
</template>
<script>
export default {
name: ‘HomeSwiper‘,
data () {
return {
swiperOption: {
pagination: ‘.swiper-pagination‘,
loop: true //循环轮播
},
swiperList: [{
id: ‘001‘,
url: ‘https://imgs.qunarzz.com/vs_ceph_vs_tts/fb5fbf5c-4f85-482b-91d6-4ce17a42618d.jpg_r_390x260x90_aae85edf.jpg‘
}, {
id: ‘0002‘,
url: ‘https://imgs.qunarzz.com/sight/p0/1411/34/6aec007588037c2d9ef339d81aeba256.water.jpg_256x160_ec997312.jpg‘
}]
}
}
}
</script>
<style scoped>
.wrapper >>> .swiper-pagination-bullet-active {
background: red;
}
.swiper-img {
width: 100%
}
.wrapper {
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 31.25% /*相对于宽高比自动撑开 */
/* width:100%;
height: 31.25vw; 除了上面那种方法，也可以这么写，意思是宽高比例*/
}
</style>
以上是关于vue项目轮播图的实现的主要内容，如果未能解决你的问题，请参考以下文章