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>

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;
}

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;
}

The list items have no default list styling.

.baner li {
    list-style: none;
}

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;
}

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;
}

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;
}

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;
    }
}

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.

Blog

Step-by-Step Guide to Creating a CSS Carousel

MD Hasan Patwary

Working Demo

HTML Structure

CSS Styling

Explanation

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related