Do you think that we can create a slideshow with navigation buttons with CSS only, not any JavaScript? Here is how we can do it from Darkcode. Just click on the button Run Pen below to see how it works:
How to create a responsive navigation bar with css
Step 1: Add Html
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked />
<input type="radio" name="r" id="r2" />
<input type="radio" name="r" id="r3" />
<input type="radio" name="r" id="r4" />
<input type="radio" name="r" id="r5" />
<div class="slide s1">
<img
src="https://res.cloudinary.com/drcrre4xg/image/upload/v1572143490/img_znoaoj.jpg"
alt=""
/>
</div>
<div class="slide">
<img
src="https://res.cloudinary.com/drcrre4xg/image/upload/v1572143370/p_gql1de.png"
alt=""
/>
</div>
<div class="slide">
<img
src="https://res.cloudinary.com/drcrre4xg/image/upload/v1572143059/bg_vuimc0.jpg"
alt=""
/>
</div>
<div class="slide">
<img
src="https://res.cloudinary.com/drcrre4xg/image/upload/v1572142950/bg_k00qm0.png"
alt=""
/>
</div>
<div class="slide">
<img
src="https://res.cloudinary.com/drcrre4xg/image/upload/v1571848483/img_gfo5ks.jpg"
alt=""
/>
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
</div>Step 2: Add CSS
body {
margin: 0;
padding: 0;
background: #34495e;
}
.slidershow {
width: 700px;
height: 400px;
overflow: hidden;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar {
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover {
background: #fff;
}
input[name='r'] {
position: absolute;
visibility: hidden;
}
.slides {
width: 500%;
height: 100%;
display: flex;
}
.slide {
width: 20%;
transition: 0.6s;
}
.slide img {
width: 100%;
height: 100%;
}
#r1:checked ~ .s1 {
margin-left: 0;
}
#r2:checked ~ .s1 {
margin-left: -20%;
}
#r3:checked ~ .s1 {
margin-left: -40%;
}
#r4:checked ~ .s1 {
margin-left: -60%;
}
#r5:checked ~ .s1 {
margin-left: -80%;
}