En la imagen de arriba, quiero que las filas se muevan infinitamente hacia la izquierda.
A continuación se muestra el código del componente:
<div id={id} className="row__posters"> {movies.map((movie) => ( <img key={movie.id} onClick={() => handleClick(movie)} className={`row__poster ${isLargeRow && "row__posterLarge"}`} src={`${base_url}${ isLargeRow ? movie.poster_path : movie.backdrop_path }`} loading="lazy" alt={movie.name} /> ))} </div>Y aquí está el css para el código del componente:
.row { color: white; margin-left: 20px; } .row__posters { display: flex; overflow-y: hidden; overflow-x: scroll; padding: 20px; } .row__posters::-webkit-scrollbar { display: none; } .row__poster { max-height: 100px; object-fit: contain; margin-right: 10px; transition: transform 450ms; } .row__poster:hover { transform: scale(1.08); opacity: 1; } .row__posterLarge { /* overflow-x: scroll; */ max-height: 250px; /* width: calc(250px * 20); */ animation: scroll 40% linear =infinite; } .row__posterLarge:hover { transform: scale(1.09); opacity: 1; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 10)); } }Quiero que la fila grande tenga un control deslizante de reproducción automática infinita y que las otras filas no se vean afectadas. Probé ( https://www.youtube.com/watch?v=3Z780EOzIQs ) pero no pasó nada. Luego probé con el tercero react-slick ( https://react-slick.neostack.com/docs/example/pause-on-hover ) y solo rompió las filas, las convirtió en una columna (alineada a la izquierda).
¿Tiene alguna idea sobre cómo implementar esta característica?
Puedes usar react-slick para eso. Si quieres que sea infinito scroll. Tienes que cambiar el objeto de configuración. Que pasas dentro del Componente deslizante. Agregue estos dos dentro de la configuración -
reproducción automática: verdadero, velocidad de reproducción automática: 2000,
para que sea un desplazamiento infinito puedes usar -
infinito: cierto,
También debe mencionar cuántas diapositivas mostrar.
diapositivas para mostrar: 3, diapositivas para desplazarse: 1,
Asegúrate de que esas propiedades sean estas. Y ha importado un archivo css dentro de su componente.
import "slick-carrusel/slick/slick.css"; import "slick-carrusel/slick/slick-theme.css";