Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Creating a Slider / Carousel with CSS Flexbox (with infinite repeating items in loop)

CSS Web Development Front End Technology

Creating an infinitely scrolling slider using CSS Flexbox allows you to build smooth, continuous carousels. This technique combines CSS animations with flexbox layout to create seamless looping effects.

Syntax

.slider-container {
    display: flex;
    overflow: hidden;
    animation: slide duration linear infinite;
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-percentage); }
}

Method 1: Manual Navigation Slider

This example creates a slider with navigation buttons for manual control −

<!DOCTYPE html>
<html>
<head>
<style>
    img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    .container {
        max-width: 600px;
        position: relative;
        margin: 6% auto;
        overflow: hidden;
        border-radius: 10px;
    }
    .slide {
        display: none;
        animation: fadeIn 0.5s;
    }
    .slide.active {
        display: block;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .prevbtn, .nextbtn {
        position: absolute;
        top: 50%;
        padding: 12px;
        margin-top: -20px;
        color: white;
        background-color: rgba(0,0,0,0.5);
        font-weight: bold;
        cursor: pointer;
        transition: 0.3s ease;
        border-radius: 50%;
        border: none;
        font-size: 18px;
    }
    .prevbtn:hover, .nextbtn:hover {
        background-color: rgba(0,0,0,0.8);
    }
    .nextbtn {
        right: 10px;
    }
    .prevbtn {
        left: 10px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="slide active">
            <img src="/css/images/slider1.jpg" alt="Slide 1" />
        </div>
        <div class="slide">
            <img src="/css/images/slider2.jpg" alt="Slide 2" />
        </div>
        <div class="slide">
            <img src="/css/images/slider3.jpg" alt="Slide 3" />
        </div>
        <button class="prevbtn" onclick="changeSlide(-1)">?</button>
        <button class="nextbtn" onclick="changeSlide(1)">?</button>
    </div>

    <script>
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');
        
        function showSlide(n) {
            slides[currentSlide].classList.remove('active');
            currentSlide = (n + slides.length) % slides.length;
            slides[currentSlide].classList.add('active');
        }
        
        function changeSlide(direction) {
            showSlide(currentSlide + direction);
        }
    </script>
</body>
</html>

A responsive image slider with navigation arrows appears, showing one image at a time with smooth fade transitions between slides.

Method 2: Infinite Auto-Scrolling Slider

This example creates a continuously scrolling slider using CSS animations and flexbox −

<!DOCTYPE html>
<html>
<head>
<style>
    .slider-container {
        width: 600px;
        height: 120px;
        margin: 50px auto;
        overflow: hidden;
        border: 3px solid #4CAF50;
        border-radius: 10px;
        position: relative;
    }
    
    .slider-track {
        display: flex;
        width: calc(200px * 6);
        animation: infiniteSlide 15s linear infinite;
    }
    
    .slide-item {
        width: 200px;
        height: 120px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 18px;
    }
    
    .slide-item:nth-child(1) { background: linear-gradient(45deg, #ff6b6b, #ee5a24); }
    .slide-item:nth-child(2) { background: linear-gradient(45deg, #4ecdc4, #44bd32); }
    .slide-item:nth-child(3) { background: linear-gradient(45deg, #45b7d1, #3742fa); }
    .slide-item:nth-child(4) { background: linear-gradient(45deg, #ff6b6b, #ee5a24); }
    .slide-item:nth-child(5) { background: linear-gradient(45deg, #4ecdc4, #44bd32); }
    .slide-item:nth-child(6) { background: linear-gradient(45deg, #45b7d1, #3742fa); }
    
    @keyframes infiniteSlide {
        0% { transform: translateX(0); }
        100% { transform: translateX(-600px); }
    }
    
    .slider-container:hover .slider-track {
        animation-play-state: paused;
    }
</style>
</head>
<body>
    <div class="slider-container">
        <div class="slider-track">
            <div class="slide-item">Slide 1</div>
            <div class="slide-item">Slide 2</div>
            <div class="slide-item">Slide 3</div>
            <div class="slide-item">Slide 1</div>
            <div class="slide-item">Slide 2</div>
            <div class="slide-item">Slide 3</div>
        </div>
    </div>
</body>
</html>

A continuously scrolling slider with colorful gradient slides moves from right to left. The animation pauses when you hover over it and resumes when you move the cursor away.

Key Points

  • Flexbox Layout: Use display: flex for horizontal slide arrangement
  • Overflow Hidden: Essential to hide slides outside the visible area
  • Transform Property: Use translateX() for smooth horizontal movement
  • Animation Duration: Adjust timing based on content amount and desired speed
  • Duplicate Content: For seamless infinite loops, duplicate the first few slides at the end

Conclusion

CSS Flexbox combined with animations provides powerful tools for creating both manual and automatic sliders. The key is using translateX() transforms and proper overflow handling for smooth, infinite scrolling effects.

Updated on: 2026-03-15T15:22:19+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements