I have been attempting to incorporate a basic carousel in my react project. I have experimented with both pure CSS and various libraries, but in every instance, the outcome has been consistent.
View the screenshot of the result
All child elements are displayed in a vertical line.
I have tried using the following libraries:
https://www.npmjs.com/package/react-responsive-carousel
https://www.npmjs.com/package/pure-react-carousel
However, the output remains the same. It seems like there is an issue with the CSS styling.
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;