Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a working slider using HTML and CSS?
Overview
A slider is a component which makes a slideshow like animation when the forward and backward navigation buttons are clicked. A slider consists of different images in an order one after another. We can create this working slider using HTML and CSS. So in the CSS we will be using the nth child selector to make the slider working. The nth child selector will select the particular child from the parent div and will make the image display on the front page.
Algorithm
Step 1 − Create an index.html file in a folder and open it in a text editor.
Step 2 − Now create a div container with id as slider.
<div id="slider"></div>
Step 3 − Create a radio button using the input tag of type radio.
<input type="radio" name="slider" id="slider1" checked />
Step 4 − Now create a container which contains the images of the slider.
<div class="sliderContainer"></div>
Step 5 − Use the img tag to insert the images in the slider.
<img src="https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300" alt="image 1" style="width: 100%;" height="100%">
Step 6 − Now create a label tag container with a for attribute and the value of the for attribute should be the same as the id name of the radio button which we had created in the first radio container.
<label for="slider1"></label>
Step 7 − If you want to add more slides to the slider repeat the steps 3, 5, 6.
Step 8 − Now create a style.css file in the same folder and link it with an index.html file.
Step 9 − Now to create the forward and backward navigation button using the below given code in the style.css file.
Step 10 − Also style your page using the CSS.
Step 11 − The slider is ready to use.
Example
In this example we have created a working slider with pure CSS. The working of CSS is done using the nth child selector, radio button and the label tags. In which we have created two files, the first file is index.html file which contains the skeleton of the HTML and other file is style.css which contains the working and styling of the slider.
<html>
<head>
<title>working slider</title>
<link rel="stylesheet" href="style.css">
<style>
* {
margin: 0;
padding: 0;
}
#slider {
height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
input[type=radio] {
display: none;
}
#slider label {
cursor: pointer;
}
#slides .sliderContainer {
transition: margin-left 0.2s;
width: 400%;
line-height: 0;
height: 300px;
}
#slides .slider {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #0a0a0a;
}
#controlspointer {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
}
#controlspointer label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
}
img{
border-radius: 5px;
}
#slider1:checked~#slides .sliderContainer {
margin-left: 0;
}
#slider2:checked~#slides .sliderContainer {
margin-left: -100%;
}
#slider1:checked~#iloc label:nth-child(1),
#slider2:checked~#iloc label:nth-child(2) {
background: #37af00;
}
#slider1:checked~#controlspointer label:nth-child(2),
#slider2:checked~#controlspointer label:nth-child(1) {
background: url(https://img.icons8.com/ios-filled/256/chevron-right.png) no-repeat center;
float: right;
display: block;
padding: 1rem;
border-radius: 100%;
width: 1px;
height: 1px;
cursor: pointer;
box-shadow: 0 0 8px rgb(83, 83, 83);
margin-right: 0.5rem;
}
#slider1:checked~#controlspointer label:nth-last-child(2),
#slider2:checked~#controlspointer label:nth-last-child(1) {
background: url(https://img.icons8.com/ios-filled/256/chevron-left.png) no-repeat center;
float: left;
display: block;
padding: 1rem;
border-radius: 100%;
width: 1px;
height: 1px;
cursor: pointer;
box-shadow: 0 0 8px rgb(83, 83, 83);
margin-left: 0.5rem;
}
#iloc {
margin: 100px 0 0;
z-index: 9;
text-align: center;
}
#iloc label {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 100%;
background: #ffffff79;
}
</style>
</head>
<body>
<h3 style="padding: 2rem;text-align: center;">Working Slider Using HTML and CSS</h3>
<div id="slider">
<input type="radio" name="slider" id="slider1" checked />
<input type="radio" name="slider" id="slider2" />
<div id="slides">
<div id="overflow">
<div class="sliderContainer">
<div class="slider slider_1">
<div class="slider-content">
<img src="https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300" alt="image 1" style="width: 100%;" height="100%">
</div>
</div>
<div class="slider slider_2">
<div class="slider-content">
<img src="https://images.ctfassets.net/hrltx12pl8hq/5vMt4yXH3WJfVGUro74UJ7/159813a78d63638d4a223a78e997f989/compressed_shutterstock_1283470036.jpg?fit=fill&w=800&h=300" alt="image 2" style="width: 100%;" height="100%">
</div>
</div>
</div>
</div>
</div>
<div id="controlspointer">
<label for="slider1"></label>
<label for="slider2"></label>
</div>
<div id="iloc">
<label for="slider1"></label>
<label for="slider2"></label>
</div>
</div>
</body>
</html>
The given below is the image of the above output. In which it shows an image in the slider with two navigation buttons and the image pointer. So on clicking on the right side arrow button the image of the slide changes to the next and on clicking on the left side arrow it shows the image of the previous slide. It also has a feature that shows the dot at the bottom of the image with its indication that on which slide it is.
Conclusion
So in the above example we have used the nth child selector as we had to build this slider working with CSS. But if we had to build this same slider working with javascript it would be easier to handle just by storing all the slides data inside an object or an array. If we want to build this using CSS only then it is required to have a good knowledge on the nth selectors of the CSS.
2K+ Views
