MD Hasan PatwaryA 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.
