In this tutorial, you’ll learn step-by-step how to build a pure CSS carousel slider using only HTML and CSS. This approach reduces page load time, boosts SEO performance, and ensures smooth, responsive behavior across modern browsers.
Carousel sliders are one of the most common UI components used on modern websites to showcase images, portfolios, products, or featured content. While many sliders rely on JavaScript or jQuery, you can achieve the same functionality using pure CSS—keeping your website lightweight, fast, and highly efficient.
Before you begin, make sure you have a basic understanding of HTML and CSS and have a code editor like VS Code or Sublime Text installed.
Project Introduction
This project focuses on creating a completely functional and responsive pure CSS carousel slider. Instead of using JavaScript to control slides, we’ll use hidden radio inputs and labels as navigation elements. CSS transitions and positioning will create smooth slide animations.
This method not only improves web performance but also keeps your code simple, clean, and beginner-friendly.
Step 1: HTML Code (Structure of the Carousel)
The HTML structure defines the foundation of the carousel. It includes:
- A main carousel wrapper
- Hidden radio buttons controlling slide visibility
- Slide containers with images
- Previous and next navigation arrows
- Bottom dot indicators
Below is the complete HTML code (unchanged as requested):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Carousel Slider</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<div class="carousel">
<ul class="slides">
<input type="radio" name="radio-buttons" id="img-1" checked />
<li class="slide-container">
<div class="slide-image">
<img src="https://www.myritebook.com/img/Pure%20CSS%20Carousel%20Slider-01.jpg">
</div>
<div class="carousel-controls">
<label for="img-3" class="prev-slide">
<span>‹</span>
</label>
<label for="img-2" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-2" />
<li class="slide-container">
<div class="slide-image">
<img src="https://www.myritebook.com/img/Pure%20CSS%20Carousel%20Slider-02.jpg">
</div>
<div class="carousel-controls">
<label for="img-1" class="prev-slide">
<span>‹</span>
</label>
<label for="img-3" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-3" />
<li class="slide-container">
<div class="slide-image">
<img src="https://www.myritebook.com/img/Pure%20CSS%20Carousel%20Slider-03.jpg">
</div>
<div class="carousel-controls">
<label for="img-2" class="prev-slide">
<span>‹</span>
</label>
<label for="img-1" class="next-slide">
<span>›</span>
</label>
</div>
</li>
<div class="carousel-dots">
<label for="img-1" class="carousel-dot" id="img-dot-1"></label>
<label for="img-2" class="carousel-dot" id="img-dot-2"></label>
<label for="img-3" class="carousel-dot" id="img-dot-3"></label>
</div>
</ul>
</div>
</div>
</body>
</html>
Step 2: CSS Code (Styling the Carousel Slider)
The CSS file controls the appearance, transitions, and responsiveness of the carousel. It includes:
- Container layout
- Slide positioning and transitions
- Arrow controls
- Dot navigation
- Responsive behavior
Below is the complete CSS code exactly as provided:
.carousel {
margin-left: 15%;
margin-right: 15%;
}
ul.slides {
display: block;
position: relative;
height: 600px;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
ul.slides input {
display: none;
}
.slide-container {
display: block;
}
.slide-image {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
transition: all .7s ease-in-out;
}
.slide-image img {
width: auto;
min-width: 100%;
height: 100%;
}
.carousel-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
font-size: 100px;
line-height: 600px;
color: #fff;
}
.carousel-controls label {
display: none;
position: absolute;
padding: 0 20px;
opacity: 0;
transition: opacity .2s;
cursor: pointer;
}
.slide-image:hover + .carousel-controls label{
opacity: 0.5;
}
.carousel-controls label:hover {
opacity: 1;
}
.carousel-controls .prev-slide {
width: 49%;
text-align: left;
left: 0;
}
.carousel-controls .next-slide {
width: 49%;
text-align: right;
right: 0;
}
.carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
z-index: 999;
text-align: center;
}
.carousel-dots .carousel-dot {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
opacity: 0.5;
margin: 10px;
}
input:checked + .slide-container .slide-image {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .carousel-controls label {
display: block;
}
input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6 {
opacity: 1;
}
input:checked + .slide-container .nav label { display: block; }
Final Output:
Conclusion
Building a pure CSS carousel slider is a smart way to enhance your website while keeping it fast and optimized. This method works smoothly across modern browsers and avoids heavy JavaScript libraries. By following the steps in this guide, you can easily integrate a lightweight, responsive, and visually appealing carousel into any webpage.