este es mi codigo
Cada vez que se desliza a la siguiente imagen, la transición hace que la imagen desaparezca y luego pasa a la siguiente, estoy usando react-bootstrap 5.1.0 pero parece que algo no funciona correctamente.
Probé con los estilos, pero parece que no funciona
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> ); } }Eliminar este código funciona bien.
import 'bootstrap/dist/css/bootstrap.css';este código es necesario en index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">Para aquellos que usan la utilidad de clase de bootstrap llamando directamente a la clase como con los documentos aquí: https://getbootstrap.com/docs/5.1/components/carousel/ . La animación deslizante para el carrusel parece no funcionar hasta que agregué esta línea import "bootstrap/dist/js/bootstrap.min.js" , junto con import "bootstrap/dist/css/bootstrap.min.css" . Estas líneas se pueden agregar en el archivo raíz index.js o en los archivos individuales, respectivamente.