image_slider.html

<div class="slider">
    <div class="slides">
        <img src="https://source.unsplash.com/600x300/?nature" alt="Slide 1">
        <img src="https://source.unsplash.com/600x300/?city" alt="Slide 2">
        <img src="https://source.unsplash.com/600x300/?technology" alt="Slide 3">
    </div>
</div>

<script>
    const slides = document.querySelector(".slides");
    let index = 0;

    function nextSlide() {
        index = (index + 1) % 3;
        slides.style.transform = `translateX(${-index * 100}%)`;
    }

    setInterval(nextSlide, 3000);
</script>

<style>
    .slider {
        width: 100%;
        max-width: 600px;
        overflow: hidden;
        border-radius: 10px;
        position: relative;
    }

    .slides {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .slides img {
        width: 100%;
        flex-shrink: 0;
    }
</style>