javascript - 轮播(纯 CSS 和 npms)在 ReactJS 中显示不佳

Question

我尝试在 react 中实现一个简单的轮播，我使用了纯 css 和库，但在所有情况下它总是显示如下

img of result

所有子项显示在垂直线上。

我试过这个代码:

https://www.npmjs.com/package/react-responsive-carousel

https://www.npmjs.com/package/pure-react-carousel

总的来说是相同的结果，我在 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;

Answer 1

在你从 'pure-react-carousel' 导入一些组件后，尝试在右上角添加这个导入:

import 'pure-react-carousel/dist/react-carousel.es.css';