.container {
width: 300px;
overflow: hidden;
position: relative;
}
.slider {
display: flex;
transition: transform 0.5s ease;
}
.item {
width: 200px;
height: 100px;
background-color: lightgoldenrodyellow;
margin-right: 10px;
}
.button {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.button.left {
left: 0;
}
.button.right {
right: 0;
}
let currentTranslateX = 0;
function slideLeft() {
currentTranslateX += 200;
document.getElementById('slider').style.transform = `translateX(${currentTranslateX}px)`;
}
function slideRight() {
currentTranslateX -= 200;
document.getElementById('slider').style.transform = `translateX(${currentTranslateX}px)`;
}