آموزش ساخت اسلایدر تصویر با استفاده از html و css

<div class="slider">
    <div class="slides">
        <div class="slide active">
            <img src="image1.jpg" alt="Image 1">
        </div>
        <div class="slide">
            <img src="image2.jpg" alt="Image 2">
        </div>
        <div class="slide">
            <img src="image3.jpg" alt="Image 3">
        </div>
    </div>
    <button class="prev" onclick="changeSlide(-1)">❮</button>
    <button class="next" onclick="changeSlide(1)">❯</button>
</div>

.slider {
    position: relative;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
    border: 2px solid #ddd;
}

.slides {
    display: flex;
    transition: transform .5s ease;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
}

.slide img {
    width: 100%;
    display: block;
}

button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, .5);
    border: none;
    cursor: pointer;
    padding: 10px;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

let currentSlide = ;

function showSlide(index) {
    const slides = document.querySelectorAll('.slide');
    if (index >= slides.length) {
        currentSlide = ;
    } else if (index < ) {
        currentSlide = slides.length - 1;
    } else {
        currentSlide = index;
    }
    const offset = -currentSlide * 100;
    document.querySelector('.slides').style.transform = `translateX(${offset}%)`;
}

function changeSlide(direction) {
    showSlide(currentSlide + direction);
}

// نمایش اسلاید اول
showSlide(currentSlide);