swiper v6.4.5 设置effect没有效果，求大佬指点

qjj

<template>
  <div id="swiperBox">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="i in 29" :key="i">
          <img :src="require(`./../assets/images/arbitration/${i}.png`)" :alt="i" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/swiper.min.css";
import "swiper/components/effect-flip/effect-flip.less";

export default {
  data() {
    return {
      index: 0,
    };
  },
  mounted() {
    var _this = this;
    this.swiper = new Swiper(".swiper-container", {
      effect: "cube",
      cubeEffect: {
        slideShadows: true,
        shadow: true,
        shadowOffset: 100,
        shadowScale: 0.6,
      },
    });
  },