Swiperjs：无法导入 coverflow 样式 vuejs

Question

我正在尝试使用 swiperjs with coverflow effect like this one: Coverflow Example

制作 VueJS 滑块

但效果并未应用于滑块。我想我不会为此导入 css，因为在

下有一个特殊文件

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

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

Answer 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>

Swiperjs：无法导入 coverflow 样式 vuejs

Swiperjs: Can't Import coverflow styles vuejs

vue.js

nuxt.js

swiper

swiperjs