Carousel (pure CSS and npms) does not display well in ReactJS

Question

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

img of result

all child display in vertical line.

I tried with this codes:

https://www.npmjs.com/package/react-responsive-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

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

Try to add this import at the top right after you imported some components from 'pure-react-carousel':

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