Html slider codes:
<div class="slider">
<div class="images">
<input type="radio" name="slide" id="img1" checked>
<input type="radio" name="slide" id="img2">
<input type="radio" name="slide" id="img3">
<input type="radio" name="slide" id="img4">
<img src="bell2.jpg" class="m1" alt="img1">
<img src="bell3.jpg" class="m2" alt="img2">
<img src="mpsbell.jpg" class="m3" alt="img3">
<img src="schoolbell.jpg" class="m4" alt="img4">
</div>
<div class="dots">
<label for="img1"></label>
<label for="img2"></label>
<label for="img3"></label>
<label for="img4"></label>
</div>
</div>
Css slider codes:
.slider {
position: relative;
width: 60%;
overflow: hidden;
}
.images {
display: flex;
width: 100%;
}
.images img {
height: 400px;
width: 100%;
transition: all 0.15s ease;
}
.images input {
display: none;
}
.dots {
display: flex;
justify-content: center;
margin: 5px;
}
.dots label {
height: 20px;
width: 20px;
border-radius: 50%;
border: solid #fff 3px;
cursor: pointer;
transition: all 0.15s ease;
margin: 5px;
}
.dots label:hover {background: #fff;}
#img1:checked ~ .m1 {
margin-left: 0;
}
#img2:checked ~ .m2 {
margin-left: -100%;
}
#img3:checked ~ .m3 {
margin-left: -200%;
}
#img4:checked ~ .m4 {
margin-left: -300%;
}
