Responsive Image Slider | HTML, CSS, Js

 

Looking for a simple and responsive image slider for your website? Here you can download a free image slider made with pure HTML, CSS, and JavaScript. It is lightweight, fast-loading, and fully mobile-friendly, making it perfect for blogs, portfolios, and business websites. This slider supports smooth transitions, modern design, and can be easily customized to match your theme. No heavy libraries required—just copy, paste, and integrate into your project!

HTML

<div class="slider">
   <div class="slides"> 
        <img src="f1.jpg" alt=" Photo Gallery" loading="lazy">
        <img src="f2.jpg" alt="  Photo Gallery" loading="lazy">
        <img src="f3.jpg" alt="  Photo Gallery" loading="lazy"> 
   </div>
   <button class="prev">&#10094;</button>
   <button class="next">&#10095;</button>
</div>

CSS

<style>
        .slider {
            position: relative;
            max-width: 100%;
            overflow: hidden;
        } 

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

             .slides img {
                width: 100%;
                flex-shrink: 0;
            }

        /* Navigation buttons */

        .prev, .next {

            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 10px;
            cursor: pointer;
            border: none;
            font-size: 18px;
            z-index: 10;
        }

 

        .prev {
            left: 10px;
        }

 

        .next {
            right: 10px;
        }

        /* Responsive */

        @media (max-width: 768px) {

            .prev, .next {
                font-size: 14px;
                padding: 8px;
            }

        }

    </style>

JS

<script>

        const slides = document.querySelector('.slides');
        const slideImages = document.querySelectorAll('.slides img');
        const prevBtn = document.querySelector('.prev');
        const nextBtn = document.querySelector('.next');
        let counter = 0;
        const size = slideImages[0].clientWidth;

        function showSlide(index) {

            if (index >= slideImages.length) counter = 0;
            if (index < 0) counter = slideImages.length - 1;
            slides.style.transform = 'translateX(' + (-counter * 100) + '%)';

        }

 

        nextBtn.addEventListener('click', () => {

            counter++;
            showSlide(counter);

        });

 

        prevBtn.addEventListener('click', () => {

            counter--;
            showSlide(counter);

        });

 

        // Auto slide

        setInterval(() => {

            counter++;
            showSlide(counter);

        }, 4000);

    </script>

Next Template
Download Source Code