.slider-container {
width: 80%;
margin: 0 auto;
overflow: hidden;
}

.slider {
display: flex;
transition: all 0.5s ease;
}

.slide {
width: 100%;
}

button {
cursor: pointer;
padding: 10px;
}

Disney+ Carousel Slider

<
>

const prevBtn = document.getElementById(‘prevBtn’);
const nextBtn = document.getElementById(‘nextBtn’);
const slider = document.querySelector(‘.slider’);

let counter = 0;

nextBtn.addEventListener(‘click’, () => {
counter++;
if (counter > 2) {
counter = 0;
}
slider.style.transform = `translateX(${-counter * 100}%)`;
});

prevBtn.addEventListener(‘click’, () => {
counter–;
if (counter < 0) {
counter = 2;
}
slider.style.transform = `translateX(${-counter * 100}%)`;
});