Css Image Slide

What is Image Slide in CSS?

SlideImages or CarouselCSS creation by virtute of overflow, position and transition properties which handles the shifting effect.

Basic Image Slider:

                          
                            .slider-container {
                                width: 300px; /* Set the width of the slider container */
                                overflow: hidden; /* Hide the overflowing content */
                            }
                            
                            .slider {
                                display: flex; /* Create a horizontal flex container for the slides */
                                transition: transform 0.5s ease-in-out; /* Add a smooth transition for the transform property */
                            }
                            
                            .slide {
                                width: 300px; /* Set the width of each slide */
                                flex-shrink: 0; /* Prevent the slides from shrinking */
                            }
                            
                            /* Navigation arrows */
                            .prev, .next {
                                cursor: pointer;
                            }
                            
                            /* Styling for demo purposes */
                            .slider-container, .slider {
                                border: 1px solid #ddd; /* Add borders for demo purposes */
                                margin: 20px 0;
                            }

HTML

                          
                            <div class="slider-container">
                                <div class="slider">
                                    <div class="slide"><img src="image1.jpg" alt="Slide 1"></div>
                                    <div class="slide"><img src="image2.jpg" alt="Slide 2"></div>
                                    <div class="slide"><img src="image3.jpg" alt="Slide 3"></div>
                                </div>
                            </div>
                            <button class="prev" onclick="prevSlide()">Previous</button>
                            <button class="next" onclick="nextSlide()">Next</button>

Javascript

                          
                            let currentIndex = 0;

function showSlide(index) {
    const slider = document.querySelector('.slider');
    const slideWidth = document.querySelector('.slide').offsetWidth;

    currentIndex = index;

    const translateValue = -slideWidth * currentIndex + 'px';
    slider.style.transform = 'translateX(' + translateValue + ')';
}

function nextSlide() {
    const totalSlides = document.querySelectorAll('.slide').length;
    currentIndex = (currentIndex + 1) % totalSlides;
    showSlide(currentIndex);
}

function prevSlide() {
    const totalSlides = document.querySelectorAll('.slide').length;
    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
    showSlide(currentIndex);
}

// Initial slide
showSlide(currentIndex);