Hay un componente:
const HorizontalScroller = (props) => { return ( <div className={'scroller scroller_horizontal'}> <div className='scroller_horizontal_child'> <div className="card" style={{width: '232px', height: '373px', margin: '0 20px', border: '1px solid red'}}> Card </div> <div className="card" style={{width: '232px', height: '373px', margin: '0 20px', border: '1px solid red'}}> Card </div> <div className="card" style={{width: '232px', height: '373px', margin: '0 20px', border: '1px solid red'}}> Card </div> <div className="card" style={{width: '232px', height: '373px', margin: '0 20px', border: '1px solid red'}}> Card </div> <div className="card" style={{width: '232px', height: '373px', margin: '0 20px', border: '1px solid red'}}> Card </div> </div> <div className="scroller_horizontal_point scroller_horizontal_point_right"/> <div className="scroller_horizontal_point scroller_horizontal_point_left"/> </div> ); };El número de tarjetas es arbitrario.
Cómo hacer que cuando haga clic en el punto correcto, las tarjetas se desplacen hacia la izquierda. Del mismo modo con el otro punto. Y esto debería suceder sin cesar. Es recomendable usar la propiedad de transformación.
Aquí hay una imagen de lo que debería suceder cuando hace clic en el punto correcto.
Traté de mover los elementos en el DOM, pero el método onclick en la tarjeta no funcionó
Este código es un ejemplo de un código de movimiento de desplazamiento que tuve el mismo problema hace algún tiempo. Espero que te ayude a resolver el problema.
Puedes ver el resultado en este enlace
<div style="width:200px;overflow-x:scroll;position:relative" id="parent"> <div style="width:600px;height:50px;background:red;display:inline-block;left:10px"></div> <div style="width:200px;height:50px;background:blue;display:inline-block"></div> <div style="width:200px;height:50px;background:green;display:inline-block"></div> </div> <button onclick="moveRight()"> right </button> <button onclick="moveLeft()"> left </button> function moveRight(){ const parent= document.getElementById('parent'); move(parent,1); } function move(element,direction){ let xTotalMove=30; let intervalId= setInterval(function(){ if(xTotalMove>0){ if(direction>0) element.scrollBy(1,0); else if(direction < 0) element.scrollBy(-1,0); xTotalMove--; } if(xTotalMove==0) clearInterval(intervalId); },10); } function moveLeft(){ const parent= document.getElementById('parent'); move(parent,-1); }