Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a working slider using HTML and CSS?
A CSS slider creates a slideshow animation where users can navigate between different images using navigation buttons. This component uses radio buttons, labels, and CSS :checked pseudo-selectors to control which slide is visible without JavaScript.
Syntax
/* Basic slider structure */
input[type="radio"]:checked ~ .slider-container {
transform: translateX(-100%);
}
.slider-container {
display: flex;
transition: transform 0.3s ease;
}
Key Components
| Component | Purpose |
|---|---|
| Radio Inputs | Track which slide is active (hidden from view) |
| Labels | Act as clickable navigation buttons |
| :checked Selector | Apply styles when a radio button is selected |
| Transform | Move slides horizontally to show different images |
Example: Complete Working Slider
The following example creates a functional image slider with navigation arrows and dot indicators
<!DOCTYPE html>
<html>
<head>
<style>
.slider {
width: 400px;
height: 250px;
overflow: hidden;
margin: 20px auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
position: relative;
}
input[type="radio"] {
display: none;
}
.slides {
display: flex;
width: 300%;
transition: transform 0.5s ease;
}
.slide {
width: 33.333%;
height: 250px;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Navigation arrows */
.nav-label {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
padding: 10px 15px;
cursor: pointer;
font-size: 18px;
border-radius: 50%;
display: none;
}
.nav-label.prev { left: 10px; }
.nav-label.next { right: 10px; }
/* Dot indicators */
.indicators {
text-align: center;
margin-top: 10px;
}
.dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ccc;
margin: 0 5px;
cursor: pointer;
}
/* Slide transitions */
#slide1:checked ~ .slides { transform: translateX(0%); }
#slide2:checked ~ .slides { transform: translateX(-33.333%); }
#slide3:checked ~ .slides { transform: translateX(-66.666%); }
/* Show navigation for current slide */
#slide1:checked ~ .nav-label[for="slide2"] { display: block; }
#slide2:checked ~ .nav-label[for="slide1"],
#slide2:checked ~ .nav-label[for="slide3"] { display: block; }
#slide3:checked ~ .nav-label[for="slide2"] { display: block; }
/* Active dot indicator */
#slide1:checked ~ .indicators .dot:nth-child(1),
#slide2:checked ~ .indicators .dot:nth-child(2),
#slide3:checked ~ .indicators .dot:nth-child(3) {
background: #333;
}
</style>
</head>
<body>
<div class="slider">
<input type="radio" name="slide" id="slide1" checked>
<input type="radio" name="slide" id="slide2">
<input type="radio" name="slide" id="slide3">
<div class="slides">
<div class="slide">
<img src="https://via.placeholder.com/400x250/ff6b6b/ffffff?text=Slide+1" alt="Slide 1">
</div>
<div class="slide">
<img src="https://via.placeholder.com/400x250/4ecdc4/ffffff?text=Slide+2" alt="Slide 2">
</div>
<div class="slide">
<img src="https://via.placeholder.com/400x250/45b7d1/ffffff?text=Slide+3" alt="Slide 3">
</div>
</div>
<label for="slide1" class="nav-label prev">?</label>
<label for="slide2" class="nav-label next">?</label>
<label for="slide2" class="nav-label prev">?</label>
<label for="slide3" class="nav-label next">?</label>
<label for="slide2" class="nav-label prev">?</label>
<div class="indicators">
<label for="slide1" class="dot"></label>
<label for="slide2" class="dot"></label>
<label for="slide3" class="dot"></label>
</div>
</div>
</body>
</html>
A responsive image slider appears with three colored placeholder images. Navigation arrows appear on hover, and dot indicators at the bottom show which slide is active. Clicking arrows or dots smoothly transitions between slides.
How It Works
The slider uses several key CSS techniques:
- Hidden radio buttons track the current slide state
- :checked pseudo-selector applies styles when a radio is selected
- Transform translateX() moves the slide container horizontally
- Labels act as clickable navigation elements linked to radio buttons
- Smooth transitions create animated slide changes
Conclusion
CSS-only sliders demonstrate the power of combining radio inputs, labels, and the :checked pseudo-selector. While JavaScript sliders offer more functionality, this approach requires no additional libraries and works across all browsers.
Updated on: 2026-03-15T17:28:01+05:30
4K+ Views
Advertisements