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.
I tried to move the elements in the DOM, but the onclick method on the card did not work
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
<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);
}