How to make slider in HTML and CSS
In this tutorial, we will learn how to create a clickable slideshow using only HTML and CSS.
Follow the code stacker below by clicking the run code button to try it
Code Example:
<html>
<head>
<title>
How to make slider in HTML and CSS
</title>
<style type="text/css">
body{
background: #6290d2;
}
.slider{
width: 640px;
margin: 100px auto;
position: relative;
padding-top: 320px;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider>img{
position: absolute;
left: 0;
top: 0;
transition:.5s;
max-width:100%;
}
.slider input{
display: none;
}
.slider label {
float: left;
margin: 10px;
border: 4px solid #CCC;
cursor: pointer;
transition: .5s;
opacity: .5;
}
.slider label img{
display: block;
}
.slider input:checked+label {
border-color: #666;
opacity: 1;
}
.slider input ~ img {
opacity: 0;
transform: .1s;
}
.slider input:checked+label+img {
opacity: 1;
transform: .1s;
}
</style>
</head>
<body>
<div class="slider">
<input type="radio" name="slide_switch" id="id1" checked="checked">
<label for="id1">
<img src="https://i.imgur.com/DUkpobn.jpg" alt="Slide-CoderWell" width="100">
</label>
<img src="https://i.imgur.com/DUkpobn.jpg" alt="Slide-CoderWell">
<input type="radio" name="slide_switch" id="id2" >
<label for="id2">
<img src="https://i.imgur.com/eAqi2jD.jpg" alt="Slide-CoderWell" width="100">
</label>
<img src="https://i.imgur.com/eAqi2jD.jpg" alt="Slide-CoderWell">
<input type="radio" name="slide_switch" id="id3">
<label for="id3">
<img src="https://i.imgur.com/CFAtkEe.jpg" alt="Slide-CoderWell" width="100">
</label>
<img src="https://i.imgur.com/CFAtkEe.jpg" alt="Slide-CoderWell">
<input type="radio" name="slide_switch" id="id4">
<label for="id4">
<img src="https://i.imgur.com/yN068GM.jpeg" alt="Slide-CoderWell" width="100">
</label>
<img src="https://i.imgur.com/yN068GM.jpeg" alt="Slide-CoderWell">
<input type="radio" name="slide_switch" id="id5">
<label for="id5">
<img src="https://i.imgur.com/DR25PT3.jpg" alt="Slide-CoderWell" width="100">
</label>
<img src="https://i.imgur.com/DR25PT3.jpg" alt="Slide-CoderWell">
</div>
</body>
</html>
Result:
