Estoy usando react-responsive-carousel para un carrusel vertical de solo texto, pero por alguna razón el control deslizante no se coloca correctamente y no puedo entender por qué.

Cuando rompo las líneas se ve así y no puedo arreglarlo:

Este es el código para el comportamiento anterior, además de una aplicación predeterminada de crear-reaccionar.

 import './App.css'; import { Carousel } from "react-responsive-carousel"; import "react-responsive-carousel/lib/styles/carousel.min.css"; function App() { const phrases = [ <p keu="1" className="text">FIRST PHRASE <br></br> SOME TEXT</p>, <p key="2" className="text">SECOND PHRASE <br></br> SOME MORE TEXT</p> ]; return ( <div className="App"> <header className="App-header"> <Carousel axis='axis' autoPlay='autoPlay' dynamicHeight={false} infiniteLoop={true} labels={false} showArrows={false} showStatus={false} showIndicators={false} showThumbs={false} width={400} > {phrases.map((item, id) => ( <div key={id} style={{ backgroundColor: "brown" }}> {item} </div> ))} </Carousel> </header> </div> ); } export default App;

La única dependencia adicional que estoy usando es yard add react-responsive-carousel

Actualizar

No es una solución, pero cambiamos a react-slick, que parece tener un mejor soporte y funcionó a la perfección.