解决Swiper在Nuxt.js中的coverflow效果问题

Question

我正在尝试制作一个具有滑动器覆盖流效果的滑块，但它总是显示默认滑块，如果我放置或不放置效果它总是相同的。 我是 nuxt 的新手，有人有什么想法，我尝试了其他效果，但它是一样的？

我正在使用 nuxt.js 3 我的package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "^3.9.3",
    "vue": "^3.4.14",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "bootstrap": "^5.3.2",
    "swiper": "^11.0.6",
    "vue-countdown-timer": "^0.0.1"
  }
}

我的代码

<template>
  <Swiper
    :autoplay="{ delay: 3000, disableOnInteraction: false }"
    :observer="true"
    :observeParents="true"
    :effect="'coverflow'"
    :slidesPerView="2"
    :centeredSlides="true"
    :coverflowEffect="{
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    }"
    :pagination="{
      clickable: true,
    }"
    class="mySwiper"
  >
    <SwiperSlide v-for="(slide, index) in slides" :key="index">
      <img :src="slide.img" alt="Slide image" class="imagenes" />
    </SwiperSlide>
  </Swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      slides: [
        { img: 'https://www3.animeflv.net/uploads/animes/thumbs/3928.jpg' },
        { img: 'https://www3.animeflv.net/uploads/animes/thumbs/3929.jpg' },
        { img: 'https://www3.animeflv.net/uploads/animes/thumbs/3928.jpg' },
        { img: 'https://www3.animeflv.net/uploads/animes/thumbs/3929.jpg' },
      ],
    };
  },
};
</script>

<style>
.mySwiper {
  /* 
height: 300px;
width: 100%;*/
  margin-bottom: 2%;
}
.imagenes {
  width: 100%;
  height: 300px;
}
</style>

你可以在这里尝试 来这里试试

Answer 1

我将代码更改为这样，它解决了问题

<template>
  <swiper
    :effect="'coverflow'"
    :grabCursor="true"
    :centeredSlides="true"
    :slidesPerView="'auto'"
    :coverflowEffect="{
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    }"
    :pagination="true"
    :modules="modules"
    class="mySwiper"
  >
    <swiper-slide
      ><img
        src="https://www3.animeflv.net/uploads/animes/thumbs/3928.jpg" /></swiper-slide
    ><swiper-slide
      ><img
        src="https://www3.animeflv.net/uploads/animes/thumbs/3929.jpg" /></swiper-slide
    ><swiper-slide
      ><img
        src="https://www3.animeflv.net/uploads/animes/thumbs/3928.jpg" /></swiper-slide
    ><swiper-slide
      ><img
        src="https://www3.animeflv.net/uploads/animes/thumbs/3929.jpg" /></swiper-slide
    ><swiper-slide
      ><img
        src="https://www3.animeflv.net/uploads/animes/thumbs/3928.jpg" /></swiper-slide
    ><swiper-slide
      ><img
        src="https://www3.animeflv.net/uploads/animes/thumbs/3929.jpg" /></swiper-slide
    ><swiper-slide
      ><img
        src="https://www3.animeflv.net/uploads/animes/thumbs/3928.jpg" /></swiper-slide
    ><swiper-slide
      ><img
        src="https://www3.animeflv.net/uploads/animes/thumbs/3929.jpg" /></swiper-slide
    ><swiper-slide
      ><img src="https://www3.animeflv.net/uploads/animes/thumbs/3928.jpg"
    /></swiper-slide>
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  import 'swiper/css/effect-coverflow';
  import 'swiper/css/pagination';



  // import required modules
  import { EffectCoverflow, Pagination } from 'swiper/modules';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      return {
        modules: [EffectCoverflow, Pagination],
      };
    },
  };
</script>
<style scoped>
  #app { height: 100% }
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

.swiper-slide img {
  display: block;
  width: 100%;
}
</style>