vue-awesome-swiper解决coverflowEffect和loop属性冲突的问题
coverflowEffect和loop在官网上不能同时使用,但有时需要3D旋转效果和循环同时存在,可以在swiper上增加一个判断就可以使这两个属性同时存在
![在这里插入图片描述](https://img-blog.csdnimg.cn/a8937a711c6946eeb796c47038209227.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA5p2v5YWF5ruh5rOh5rOh55qE5Y-v5LmQ,size_8,color_FFFFFF,t_70,g_se,x_16)
<template>
<div class="swiperTwoBox">
<swiper
class="swiper-container"
:options="swiperTwoOption"
ref="myTwoSwiper"
v-if="arr.length>0"
>
<!-- 在swiper判断循环的数组长度是否大于0就可以使其循环播放了 -->
<swiper-slide
v-for="(item, index) in arr"
:key="index"
>
<img
class="swiperTwoImg"
:src="item"
/>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
components: {
swiper,
swiperSlide,
},
data() {
return {
swiperTwoOption: {
slidesPerView: 1,
observer: true,
observeParents: true,
centeredSlides: true,
loop: true,
effect: "coverflow",
coverflowEffect: {
rotate: 10,
stretch: 206,
depth: 200,
modifier: 1,
slideShadows: false,
},
},
arr: [
"https://t7.baidu.com/it/u=2942499027,2479446682&fm=193&f=GIF",
"https://t7.baidu.com/it/u=3165657288,4248157545&fm=193&f=GIF",
"https://t7.baidu.com/it/u=3240224891,3518615655&fm=193&f=GIF",
"https://t7.baidu.com/it/u=2501476447,3743798074&fm=193&f=GIF",
],
};
},
};
</script>
<style>
.swiperTwoBox {
margin: 0 1rem;
}
.swiperTwoBox img {
width: 12.4rem;
height: 6.775rem;
display: block;
margin: 0 auto;
}
</style>