Swiperjs：无法导入coverflow样式vuejs答案

【问题标题】：Swiperjs: Can't Import coverflow styles vuejsSwiperjs：无法导入coverflow样式vuejs
【发布时间】：2021-06-21 15:46:21
【问题描述】：

我正在尝试使用 swiperjs 制作一个 VueJS 滑块，其封面流效果如下：Coverflow Example

但该效果不适用于滑块。我想我没有为此导入css，因为它有一个特殊的文件在下面

node_modules>swiper/components/effect-coverflow/effect-coverflow.less

这里有一个full CSS styles 可用。
如何在我的 Nuxt 组件中导入 css？

【问题讨论】：

请提供一些代码示例，因为现在很难为您提供帮助。您是否在<script> 之后和export default { 之前尝试过import 'swiper/components/effect-coverflow/effect-coverflow.less';，如文档中所示？
是的，这就是我所做的，但是当我查看 swiperjs githu repo 上的文件时，它是空的，所以这不再是问题了。
这个样式文件可以在这里找到：github.com/nolimits4web/swiper/blob/3aad554cb4/src/components/…
是的，但正如您看到的那样，它是空的，所以这不是导致问题的原因。
在文档中，它说它是必需的。无效本身不是问题。包可能不需要更多的 CSS 来实现溢出效果（可能所有东西都已经在基本样式中了）。

标签： vue.js nuxt.js swiper swiperjs

【解决方案1】：

到目前为止，我仍然不确定您编写的实际代码，但您是否查看了 Vue 中的官方演示示例？ https://swiperjs.com/demos#effect-coverflow
这在 Nuxt 中不会改变，您可以将其保留在组件中。

<template>
  <swiper :effect="'coverflow'" 
    :grabCursor="true"
    :centeredSlides="true"
    slidesPerView="auto"
    :coverflowEffect="{
      'rotate': 50,
      'stretch': 0,
      'depth': 100,
      'modifier': 1,
      'slideShadows': true
    }" 
    :pagination="true"
    class="mySwiper"
  >
    <swiper-slide><img src="https://swiperjs.com/demos/images/nature-1.jpg" /></swiper-slide>
    <swiper-slide><img src="https://swiperjs.com/demos/images/nature-2.jpg" /></swiper-slide>
    <swiper-slide><img src="https://swiperjs.com/demos/images/nature-3.jpg" /></swiper-slide>
    <swiper-slide><img src="https://swiperjs.com/demos/images/nature-4.jpg" /></swiper-slide>
    <swiper-slide><img src="https://swiperjs.com/demos/images/nature-5.jpg" /></swiper-slide>
    <swiper-slide><img src="https://swiperjs.com/demos/images/nature-6.jpg" /></swiper-slide>
    <swiper-slide><img src="https://swiperjs.com/demos/images/nature-7.jpg" /></swiper-slide>
    <swiper-slide><img src="https://swiperjs.com/demos/images/nature-8.jpg" /></swiper-slide>
    <swiper-slide><img src="https://swiperjs.com/demos/images/nature-9.jpg" /></swiper-slide>
  </swiper>
</template>

<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/swiper.scss';

import "swiper/components/effect-coverflow/effect-coverflow.min.css"
import "swiper/components/pagination/pagination.min.css"

import './style.css'; // this one is not required so far

// import Swiper core and required modules
import SwiperCore, {
  EffectCoverflow,Pagination
} from 'swiper/core';

// install Swiper modules
SwiperCore.use([EffectCoverflow,Pagination]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
}
</script>

【讨论】：

感谢这实际上有帮助，我必须从 swiper 导入 EffectCoverflow 然后将其传递给 swiper.use() Swiper.use([Pagination, EffectCoverflow])