[英]Trouble installing Swiper in my React project
I'm trying to add Swiper to my React Web App, I'm having trouble with the regular plugin, so I decided to use this framework instead: swiper-react specifically designed for React.我正在尝试将Swiper添加到我的 React Web 应用程序中,我在使用常规插件时遇到问题,所以我决定改用这个框架:专为 React 设计的swiper-react 。
Following the getting started tutorial:按照入门教程:
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';
It says that I need to import these CSS files but when I try to import them in my Component, at runtime I'm getting:它说我需要导入这些 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'
without them the result on the page is the following:没有它们,页面上的结果如下:
Here is the code of the page:这是页面的代码:
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>
)
}
What am I doing wrong?我究竟做错了什么? Thanks.
谢谢。
yo, if you use swiper@6.xx then there is no 'swiper/css/swiper.css'.哟,如果你使用 swiper@6.xx 那么没有'swiper/css/swiper.css'。 there is only 'swiper/swiper.scss', so if you can work with that, go for it.
只有'swiper/swiper.scss',所以如果你可以使用它,go 就可以了。
in my case i downgraded to swiper@5.xx because in that version there is still the css folder and file.在我的情况下,我降级到 swiper@5.xx 因为在那个版本中仍然有 css 文件夹和文件。
It says in the Styling section of readme .它在自述文件的样式部分中说。
For version <=2.3.2
对于版本 <=2.3.2
You can import direct from
react-id-swiper/lib/styles/
(supporting css, scss)您可以直接从
react-id-swiper/lib/styles/
导入(支持 css、scss)css
css
import 'react-id-swiper/lib/styles/css/swiper.css'
scss
scss
import 'react-id-swiper/lib/styles/scss/swiper.scss'
For version >=3.0.0
对于版本 >=3.0.0
You should import directly from
Swiper
packages which supports css, scss and less您应该直接从支持
Swiper
8CBA22E28EB17B5F5C6AE2A266AZ、scss 和更少的 Swiper 包导入css
css
import 'swiper/css/swiper.css'
scss
scss
import 'swiper/swiper.scss'
less
较少的
import 'swiper/swiper.less'
You should try importing for v3.0.0 because that is the current version on npm.您应该尝试导入 v3.0.0,因为这是 npm 上的当前版本。
As of swiper@6.0.0, the style imports look like this:从 swiper@6.0.0 开始,样式导入如下所示:
swiper.less - core Swiper LESS
swiper.less - 核心 Swiper LESS
swiper.scss - core Swiper SCSS
swiper.scss - 核心 Swiper SCSS
swiper-bundle.css - Swiper bundle CSS
swiper-bundle.css - Swiper bundle CSS
More info can be found here: https://swiperjs.com/changelog#6-0-0-released-on-july-3rd-2020更多信息可以在这里找到: https://swiperjs.com/changelog#6-0-0-released-on-july-3rd-2020
Try downgrading your SwipeJS to version 6.8.4
using:尝试使用以下命令将 SwipeJS 降级到
6.8.4
版本:
npm: npm:
npm install swiper@6.8.4
yarn:纱:
yarn add swiper@6.8.4
This worked for me:)这对我有用:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.