使用vue-awesome-swiper组件
中间图片大,两边图片小的效果
<style>
@import "../../../node_modules/swiper/dist/css/swiper.css";
/* pageFullScreen在index.css */
#xxxFullScreen {
background-color: #eee;
}
#swiper1 {
width: 100%;
overflow: hidden;
padding: 0 0 10px 0;
}
.swiper-container, .swiper-container2 {
width: 100%;
height: 300px;
overflow: visible !important;
position: relative;
}
#swiper1 .swiper-container .swiper-wrapper .swiper-slide {
width: 300px;
border-radius: 10px;
background-color: red;
}
/* 上一张 */
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-prev {
margin-top: 5px;
height: 155px !important;
}
/* 下一张 */
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-next {
margin-top: 5px;
height: 155px !important;
}
/* 中间的图片 */
.swiper-container .swiper-wrapper .swiper-slide-active {
height: 165px !important;
}
</style>
<template>
<div class="pageFullScreen" id="xxxFullScreen">
<!-- 内容 -->
<div class="swiper-container" id="swiper1">
<!-- 轮播图 -->
<swiper :options="swiperOption">
<swiper-slide class="swiper-slide" v-for="(item, key) in imagesData" :key="key" style="height: 40%">
<div>{{item.name}}</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
export default {
data() {
return {
swiperOption: {
// autoplay: {
// delay: 3000,
// disableOnInteraction: false
// },
loop: true, // 无限循环
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 9,
loopAdditionalSlides: 100
},
imagesData: [{name: 'aaa'}, {anme: 'bbb'}, {name: 'ccc'}],
}
},
// created activated
created() {
console.log('created')
},
// 监听变量
watch: {
},
// 页面离开 destroyed deactivated
destroyed() {
console.log('destroyed')
},
mounted() {
},
methods: {
}
}
</script>