How to create infinity horizontal scroller

Question

There is a component:

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>
    );
};

The number of cards is arbitrary

How to make it so that when you click on the right point, the cards shift to the left. Similarly with the other point. And this should happen endlessly It is advisable to use the transform property

Here is a picture of what should happen when you click on the right point.

pic.1

I tried to move the elements in the DOM, but the onclick method on the card did not work

Answer 1

This code is an example of a scrolling motion code that I had the same problem some time ago. I hope it helps you solve the problem.
You can see the result in this link

HTML

<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>
  

javascript

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);
}