下载依赖:cnpm install --save vue-awesome-swiper
在需要使用的界面引入即可
vue-awesome-swiper地址:vue-awesome-swiper
示例:
<template>
<swiper class="swiper" :options="swiperOption">
<template v-for="(item,index) in carouselData">
<swiper-slide :key="(item,index)">
<div class="cont">
<img :src="item.imgurl" alt="">
<p><a href="#" target="_black">{{item.title}}</a></p>
</div>
</swiper-slide>
</template>
</swiper>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
carouselData: [
{ id: 1, title: 'title', imgurl: '../../static/img/picture/u33.jpg', linkurl: 'https://www.baidu.com' },
{ id: 2, title: 'title', imgurl: '../../static/img/picture/u39.jpg', linkurl: 'https://www.baidu.com' },
{ id: 3, title: 'title', imgurl: '../../static/img/picture/u42.jpg', linkurl: 'https://www.baidu.com' },
{ id: 4, title: 'title', imgurl: '../../static/img/picture/u36.jpg', linkurl: 'https://www.baidu.com' },
{ id: 5, title: 'title', imgurl: '../../static/img/picture/u45.jpg', linkurl: 'https://www.baidu.com' },
],
swiperOption: {
slidesPerView: 4,
spaceBetween: 15,
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
}
},
created() {},
methods: {}
}
</script>
<style scoped>
.swiper {
border: 1px solid red;
height: 215px;
width: 1200px;
padding: 10px;
}
.cont a {
text-decoration: none;
color: #333;
}
.cont a:hover {
cursor: pointer;
color: #2664AE;
}
.cont {
box-sizing: border-box;
margin: 2px auto;
}
.cont img {
width: 100%;
height: 185px;
cursor: pointer;
}
.cont p {
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.swiper-pagination {
border: 1px solid green;
}
</style>
效果图: