vue-awesome-swiper解决coverflowEffect和loop属性冲突的问题

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

coverflowEffect和loop在官网上不能同时使用，但有时需要3D旋转效果和循环同时存在，可以在swiper上增加一个判断就可以使这两个属性同时存在

<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, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        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>