旋转木马(纯CSS和npms)在ReactJS中显示不佳。

Question

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

结果img

所有子显示在垂直线上。

我试过这个密码：

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';