Infinite Image Slider

Introduction

An infinite image carousel is a great way to showcase images in a seamless, automated scrolling effect. In this tutorial, we will create a pure HTML & CSS image slider without using JavaScript. This method ensures a lightweight and fast-loading carousel for your website.

Why Use an Infinite Image Carousel?

✅ Enhances User Experience – Creates a smooth scrolling effect.
✅ No JavaScript Required – Keeps the website lightweight.
✅ Fully Responsive – Works across all screen sizes.
✅ Easy to Implement – Uses only CSS animations.

Live Preview

👉 See Demo

Steps to Create an Infinite Image Carousel

We will achieve this using CSS keyframes animation and the display: flex property for smooth scrolling.

1. HTML Structure

First, let's define the basic HTML layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Carousel</title>
    <link rel="stylesheet" href="carousel.css">
</head>
<body>
    <div class="carousel">
        <div class="image-container">
            <img src="images/1.jpg.jpg" alt="">
            <img src="images/2.jpg.jpg" alt="">
            <img src="images/3.jpg.jpg" alt="">
            <img src="images/4.jpg.jpg" alt="">
            <img src="images/5.jpg.jpg" alt="">
            <img src="images/6.jpg.jpg" alt="">
            <img src="images/7.jpg.jpg" alt="">
            <img src="images/8.jpg.jpg" alt="">
            <img src="images/9.jpg.jpg" alt="">
            <img src="images/10.jpg.jpg" alt="">
        </div>
    </div>
</body>
</html>

2. CSS Styling

Now, let's apply CSS to make the carousel work.

body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #a5b1c2;
}

.carousel{
    overflow: hidden;
    width: 700px;
    background-color: #1e272e;
    padding: 30px 0;
    margin-top: 60px;
    border-radius: 5px;
    box-shadow: 20px 35px 35px rgba(0, 0, 0, 0.5);
    -webkit-box-reflect: below 2.5px linear-gradient(transparent, transparent, rgba(3, 3, 3, 0.2));
}

.image-container{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 250px;
    justify-items: stretch;
    animation: animation 12s linear infinite;
}

.image-container img{
    width: 200px;
    height: 270px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #a5b1c2;
}

@keyframes animation{
    to{
        translate: calc(-4*250px);
    }
}

Final Thoughts

This infinite image carousel using HTML & CSS is simple yet effective. It enhances the user experience without slowing down your site with JavaScript dependencies. 🚀

Share Your Thoughts

Did you find this tutorial helpful? Let me know in the comments! 😊

🔹 [How To Make a Password Generator App]
🔹 [Analog Click Using HTML CSS & JS]

Infinite Image Carousel Using Only HTML & CSS

Infinite Image Slider

Introduction

Why Use an Infinite Image Carousel?

Live Preview