vue3+swiper实现卡片叠加轮播效果
<template >
<div class="box">
<span @click="onDownload">报名表下载</span>
<div class="swiper-container swiper1" style="height: 650px">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../../assets/images/logo.jpg" />
</div>
<div class="swiper-slide">
<img src="../../assets/images/logo.jpg" />
</div>
<div class="swiper-slide">
<img src="../../assets/images/logo.jpg" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>
</div>
</template>
<script>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import * as api from '../../service/api'
import * as utile from '../../common/utile/export'
import {FIELD} from './field.js';
import Swiper,{Autoplay,EffectCoverflow,EffectCube,Pagination,Navigation,EffectCreative,coverflowEffect} from 'swiper';
import "swiper/swiper-bundle.min.css";
// swiper.less/sass/css 决定了基础的样式
import "swiper/swiper.min.css";
Swiper.use([
Autoplay,EffectCoverflow,EffectCube,Pagination, EffectCreative,Navigation,coverflowEffect
])
export default {
name: 'download',
onMounted(){
},
setup () {
console.log(ref, reactive, computed, watch, onMounted, api)
const activeNames = reactive([])
let onDownload = () => {
api.gethotList().then(res => {
console.log('列表返回数据', res)
utile.doExportDataCSV(res.shopList,FIELD, '报名表')
})
}
onMounted(() => {
new Swiper(".swiper1", {
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
hideOnClick: true,
},
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
on: {
navigationShow: function () {
console.log("按钮显示了");
},
effect: "coverflow", //默认就是slide位移,fade淡入淡出,cube3d方块,coverflow 3d流
},
speed: 500, //切换过渡速度
effect:'coverflow',
centeredSlides:true,
slideShadows:true,
slidesPerView:'auto',
coverflowEffect: {
rotate: 0,
stretch: 60, // 指的时后面一张图片被前一张图片遮挡的部分
depth: 100, // 图片缩小的部分
modifier: 2
},
notNextTick:true,
loop:true,
initialSlide:1,
direction:"horizontal",
});
})
return {
onDownload,
activeNames
}
},
}
</script>
<style scoped lang="less">
.box {
text-align: left;
margin-top: 20px;
span {
padding: 20px;
text-decoration: underline;
color: blue;
font-size: 20px;
}
}
</style>
<style lang="less">
.swiper-wrapper{
.swiper-slide{
width:200px;
height:100px;
img{
width:200px;
height:150px
}
}
}
</style>
