Estoy usando la biblioteca de carrusel múltiple de reacción para mostrar algunos divs. El código parece estar funcionando en teoría como se ve a continuación:

 import * as React from "react"; import "../styles/Home.css"; import Carousel from "react-multi-carousel"; import "react-multi-carousel/lib/styles.css"; const responsive = { superLargeDesktop: { // the naming can be any, depends on you. breakpoint: { max: 4000, min: 3000 }, items: 5 }, desktop: { breakpoint: { max: 3000, min: 1024 }, items: 5 }, tablet: { breakpoint: { max: 1024, min: 464 }, items: 5 }, mobile: { breakpoint: { max: 464, min: 0 }, items: 5 } }; const IndicatorCarousel = () => { return ( <div className="IndicatorCarousel"> <div className="IndicatorCarouselText"> Select your preferred stock indicators </div> <br></br> <Carousel swipeable={false} draggable={false} showDots={true} responsive={responsive} ssr={true} // means to render carousel on server-side. infinite={true} autoPlaySpeed={1000} keyBoardControl={true} customTransition="all .5" transitionDuration={500} containerClass="carousel-container" removeArrowOnDeviceType={["tablet", "mobile"]} dotListClass="custom-dot-list-style" itemClass="carousel-item-padding-40-px" > <div className="IndicatorCarouselCard"> Test </div> <div className="IndicatorCarouselCard"> Test2 </div> <div className="IndicatorCarouselCard"> test3 </div> <div className="IndicatorCarouselCard"> test4 </div> <div className="IndicatorCarouselCard"> test5 </div> </Carousel> </div> ); }; export default IndicatorCarousel;

Sin embargo, cuando represento el carrusel en mi navegador, solo muestra tres secciones con un div singular en cada sección y se puede navegar usando los puntos y las flechas. En cambio, me gustaría mostrar las tres secciones al mismo tiempo y moverme a lo largo del carrusel usando las flechas.

¿Alguien ve algo mal en mi código?

Hágamelo saber.

Situación actual: