Javascript 在React项目中安装Swiper时遇到问题

我正在尝试添加到我的React Web应用程序中，我在使用常规插件时遇到问题，因此我决定改用此框架： 专门为React设计

以下是入门教程：

Stylesheet

/*react-id-swiper requires Swiper's stylesheet. You can use CDN or use provided stylesheet files (css or scss) from react-id-swiper/lib/styles*/

Provided stylesheet files
// scss
import 'react-id-swiper/lib/styles/scss/swiper.scss';
// css
import 'react-id-swiper/lib/styles/css/swiper.css';

它说我需要导入这些CSS文件，但当我尝试在我的组件中导入它们时，在运行时我得到：

./src/component/component/HorizontalEventList.jsx
Module not found: Can't resolve 'react-id-swiper/lib/styles/css/swiper.css' in '/Users/giulioserra/Documents/Siti Web/Hangover/hangover/src/component/component' 

如果没有它们，页面上的结果如下：

以下是页面代码：

     import React, { Component } from "react";
    import { Link } from "react-router-dom";
    import global from "../../resource/global.json";

        import System from "../../System/System";
        import Spinner from "../component/Spinner";

        import EventMini from "../card/EventMini";

        import Swiper from 'react-id-swiper';

export default class HorizontalEventList extends Component {
  constructor() {
    super();
    this.state = {
      dataFetched: false,
      emptyMessage: "Nulla da visualizzare.",
    };
  }

  componentDidMount() {
    //here we check if there is a callback to fetch data from
    try {
      if (this.state.dataFetched) return;

      if (this.props.datasource !== undefined) {
        this.setState({ datasource: this.props.datasource, dataFetched: true });
        return;
      }

      if (this.props.dataCallback !== undefined && !this.state.dataFetched) {
        this.props.dataCallback().then((events) => {
          this.setState({ datasource: events, dataFetched: true });
        });
      }
    } catch (err) {
      console.log({ error: err });
      this.setState({ datasource: {}, dataFetched: true });
    }
  }

  /**
   * Generate a list to display the events
   * @author Giulio Serra <giulio.serra1995@gmail.com>
   */
  generateEvenList() {
    let elements = [];

    for (const eventID in this.props.datasource) {
      const event = this.props.datasource[eventID];
      elements.push(
        <li
          key={eventID}
          style={{
            marginLeft: "30px",
            marginRight: "30px",
            marginBottom: "30px",
          }}
        >
          <EventMini event={{ [eventID]: event }} />
        </li>
      );
    }

    return (
      <div>
        <ul
          className="list-group list-group-horizontal"
          style={{ listStyle: "none", overflowX: "auto" }}
        >
          {elements}
        </ul>
      </div>
    );
  }

  render() {

    const params = {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      }
    }

    return (
      <Swiper {...params}>
        <div>Slide #1</div>
        <div>Slide #2</div>
        <div>Slide #3</div>
        <div>Slide #4</div>
        <div>Slide #5</div>
      </Swiper>
    )
}

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
从“../../resource/global.json”导入全局文件；
从“../../System/System”导入系统；
从“./组件/微调器”导入微调器；
从“./卡/EventMini”导入EventMini；
从“react id Swiper”导入Swiper；
导出默认类HorizontalEventList扩展组件{
构造函数（）{
超级（）；
此.state={
dataFetched:false，
空消息：“空的视觉化。”，
};
}
componentDidMount（）{
//在这里，我们检查是否有从中提取数据的回调
试一试{
if（this.state.dataFetched）返回；
if（this.props.datasource！==未定义）{
this.setState（{datasource:this.props.datasource，dataFetched:true}）；
回来
}
if（this.props.dataCallback！==未定义&&！this.state.dataFetched）{
this.props.dataCallback（）。然后（（事件）=>{
this.setState（{datasource:events，dataFetched:true}）；
});
}
}捕捉（错误）{
log（{error:err}）；
this.setState（{datasource:{}，dataFetched:true}）；
}
}
/**
*生成一个列表以显示事件
*@作者朱利奥·塞拉
*/
generateEvenList（）{
让元素=[]；
for（此.props.datasource中的const eventID）{
const event=this.props.datasource[eventID]；
元素。推(


);
}
返回(

{elements}

);
}
render（）{
常量参数={
幻灯片视图：3，
空间期:30,，
分页：{
el:“.swiper分页”，
可点击：正确，
}
}
返回(
幻灯片#1
幻灯片#2
幻灯片#3
幻灯片#4
幻灯片#5
)
}

---

我做错了什么？谢谢。

它在的造型部分中说

适用于3.0.0版

您应该直接从支持css的

Swiper

软件包导入， SCS及以下

css

导入'swiper/css/swiper.css'

scss

导入“swiper/swiper.scss”

少

导入“swiper/swiper.less”

---

您应该尝试导入v3.0.0，因为这是npm上的当前版本。

yo，如果您使用swiper@6.x.x然后没有“swiper/css/swiper.css”，只有“swiper/swiper.scss”，所以如果你能用它，就去用它吧

就我而言，我降级为swiper@5.x.x因为在那个版本中仍然有css文件夹和文件