DEV Community

MD Hasan Patwary
MD Hasan Patwary

Posted on

1

Step-by-Step Guide to Creating a CSS Carousel

A CSS-only carousel can be an elegant and performant way to showcase images or content. This guide explains how to create a simple, yet effective carousel using only HTML and CSS.

Working Demo

You can view and interact with the working demo on JSFiddle: CSS Carousel Demo

HTML Structure

The HTML structure consists of an article element that acts as a wrapper. Inside this wrapper, there's a container div followed by a row div, and within it, the slideshow div contains the list of slides.

<article id="top" class="wrapper style1">
   <div class="container">
     <div class="row">
       <div class="slideshow">
         <ul class="baner">
           <li><span>SKUP AUT SPRAWNYCH I USZKODZONYCH <br>GOTÓWKA DO RĘKI</span></li>
           <li><span>SKUP AUT POZNAŃ I WIELKOPOLSKA <br>ZADZWOŃ</span></li>
           <li><span>SKUP AUT SPRAWNYCH I <br>USZKODZONYCH - GOTÓWKA DO RĘKI</span></li>
         </ul>
       </div>
     </div>
   </div>
</article>
Enter fullscreen mode Exit fullscreen mode

CSS Styling

Slideshow Container

The .slideshow class centers the slideshow, sets its maximum width, and makes it responsive.

.slideshow {
    margin: 0px auto;
    max-width: 1920px;
    width: 100%;
    height: 450px;
    text-align: center;
    position: relative;
}
Enter fullscreen mode Exit fullscreen mode

Banner Styling
The .baner class positions the list absolutely within the slideshow container.

.baner {
    position: absolute;
    padding-left: 0;
    width: 100%;
    height: 450px;
    top: 50px;
    left: 0;
    right: 0;
}
Enter fullscreen mode Exit fullscreen mode

The list items have no default list styling.

.baner li {
    list-style: none;
}
Enter fullscreen mode Exit fullscreen mode

Slide Styling

The span elements inside the list items are styled to cover the entire slide area, and are positioned absolutely.

.baner li span {
    padding-top: 180px;
    font-size: 40px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: white;
    font-weight: 400;
    text-align: left;
    letter-spacing: 4px;
    font-family: open-sans, sans-serif;
    background-size: cover;
    background-position: 50% 50%;
    opacity: 0;
    z-index: 2;
    animation: imageAnimation 15s ease infinite 0s;
}
Enter fullscreen mode Exit fullscreen mode

Overlay
A pseudo-element is used to create a dark overlay over the text.

.baner li span::after {
    content: "";
    background-color: #00000066;
    width: 50%;
    height: 25%;
    top: 170px;
    position: absolute;
    left: 0px;
    z-index: -1;
}
Enter fullscreen mode Exit fullscreen mode

Background Images and Animation Delay

Each slide is given a background image and a different animation delay to create the slideshow effect.

.baner li:nth-child(1) span {
    background-image : url(https://images.pexels.com/photos/19964831/pexels-photo-19964831/free-photo-of-blue-heron.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load);
}

.baner li:nth-child(2) span {
    background-image: url(https://images.pexels.com/photos/12489311/pexels-photo-12489311.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load);
    animation-delay: 5s;
}

.baner li:nth-child(3) span {
    background-image : url(https://images.pexels.com/photos/20744632/pexels-photo-20744632/free-photo-of-a-church-sits-on-top-of-a-hill-overlooking-a-valley.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load);
    animation-delay: 10s;
}
Enter fullscreen mode Exit fullscreen mode

Keyframes Animation

The @keyframes rule defines the fade-in and fade-out animation for the slides.

@keyframes imageAnimation {
    0% {
        opacity: 0;
    }
    13% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    37% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
Enter fullscreen mode Exit fullscreen mode

Explanation

1. Structure and Layout: The HTML sets up the basic structure for the carousel. The CSS ensures the slideshow is centered and takes up the full width of its container.

2. Positioning and Styling: Each slide is absolutely positioned to occupy the full space of the container. The pseudo-element adds a semi-transparent overlay to improve text readability.

3. Background and Animation: Each slide is assigned a background image. The animation delay staggers the appearance of each slide, creating a seamless transition.

4. Keyframes Animation: The keyframes animation handles the opacity changes, making each slide fade in and out at the specified intervals.

Conclusion

This guide covers the basics of creating a CSS-only carousel. By understanding the HTML structure and CSS animations, you can build and customize your carousel to suit various needs. The working demo provides a practical example that you can explore and modify.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more