This is my code
Every time it slides to the next image, the transition makes the image disappear, and then it goes to the next one, I'm using react-bootstrap 5.1.0 but it seems like something is not working correctly.
I tried with the styles, but it seems like it's not working
import React, { Component } from 'react';
import { Carousel } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
export default class CarouselPage extends Component {
render() {
return (
<Carousel>
<Carousel.Item>
<img
className="d-block w-100"
src="https://via.placeholder.com/1440x500"
alt="First slide"
/>
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="https://via.placeholder.com/1440x500"
alt="Second slide"
/>
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="https://via.placeholder.com/1440x500"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
}
}
Removing this code works fine.
import 'bootstrap/dist/css/bootstrap.css';
this code is needed in index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
For those who are using the bootstrap class utility by directly calling the class as with the docs here: https://getbootstrap.com/docs/5.1/components/carousel/. The sliding animation for the carousel seems to not work until I added this line import "bootstrap/dist/js/bootstrap.min.js", along with import "bootstrap/dist/css/bootstrap.min.css". These lines could be added in the root index.js file or in the individual files respectively.