[英]Carousel (pure CSS and npms) does not display well in ReactJS
I have tried to implement a simple carousel in react, I have used both pure css and libraries but in all cases it is always shown as follows我试图在反应中实现一个简单的轮播,我使用了纯 css 和库,但在所有情况下它总是如下所示
all child display in vertical line.所有子项显示在垂直线上。
I tried with this codes:我试过这个代码:
https://www.npmjs.com/package/react-responsive-carousel https://www.npmjs.com/package/react-responsive-carousel
https://www.npmjs.com/package/pure-react-carousel https://www.npmjs.com/package/pure-react-carousel
and in all it is the same result, I don't have a style in the css class总而言之,结果相同,我在 css 类中没有样式
import React, {Component} from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext }
from 'pure-react-carousel';
class App extends Component {
render() {
return (
<div className="App">
<CarouselProvider
naturalSlideWidth={30}
naturalSlideHeight={10}
totalSlides={3}
>
<Slide index={0}>
<img src="/img/Gallery01.png" />
</Slide>
<Slide index={1}>
<img src="/img/Gallery01.png" />
</Slide>
<Slide index={2}>
<img src="/img/Gallery01.png" />
</Slide>
</CarouselProvider>
</div>
);
}
}
export default App;
从'pure-react-carousel'
导入一些组件后,尝试在右上角添加此导入:
import 'pure-react-carousel/dist/react-carousel.es.css';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.