كيفية إنشاء Slider

<div class="slider-container">
    <div class="slider-item active">
        <img src="image1.jpg">
    </div>
    <div class="slider-item">
        <img src="image2.jpg">
    </div>
    <div class="slider-item">
        <img src="image3.jpg">
    </div>
</div>

.slider-container {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.slider-item {
    width: 100%;
    aspect-ratio: 16/9;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.slider-item.active {
    opacity: 1;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    width: 100px;
}

.slider-control {
    color: #fff;
    font-size: 40px;
    cursor: pointer;
}

.prev-slide {
    margin-right: 20px
}

.next-slide {
    margin-left: 20px;
}

const sliderItems = document.querySelectorAll('.slider-item');
const prevSlide = document.querySelectorAll('.prev-slide');
const nextSlide = document.querySelectorAll('.next-slide');

let currentIndex = 0;
let slideInterval = setInterval(next, 5000);

function next() {
    sliderItems[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % sliderItems.length;
    sliderItems[currentIndex].classList.add('active');
}

function prev() {
    sliderItems[currentIndex].classList.remove('active');
    currentIndex = (currentIndex - 1 + sliderItems.length) % sliderItems.length;
    sliderItems[currentIndex].classList.add('active');
}

nextSlide.addEventListener('click', () => {
    clearInterval(slideInterval);
    next();
    slideInterval = setInterval(next, 5000);
});

prevSlide.addEventListener('click', () => {
    clearInterval(slideInterval);
    prev();
    slideInterval = setInterval(next, 5000);
});