Slideshow With Navigation Buttons Using Only HTML & CSS

◘ Code Editor : Atom
◘ Music Name : Lensko - Cetus [NCS Release]

[billmaragos]

A tip for anyone who might face the same problem: in case you use other pictures (like logos, etc) in your website, remember to give each a separate class name, instead of just 'img', so they won't overlap with those of the slider inside the css file! I spent some time trying to debug this...

[shauryamaansingh]

DarkCode, You are the best man!!
Way better than Online Tutorials who copies your ideas.
Never quit youtubing...you do not know the amount of people you are helping.
A lot of Thanks!!

[Hobbamok]

Holy shit the ONLY video that actually delivers.
20 libraries and 30 shit youtubers for some reason were further up in the google results but you have my subscription

[apoorv]

Was Studying HTML CSS and i got Notification from You!

[hellonishant]

Ultimate favourite page on youtube :) Love from India :)

[findinglight]

thank you my friend. you helped me make a birthday present for my dad

[a_l_o_k_]

never imagined we can build it without JS :)

[Hyokora]

css:
body{
margin: 0;
padding: 0;

}
.slidershow{
width: 1500px;
height: 675px;
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%;
}

[jkuhede]

I added this to my site and it still upholds a good look after 2 years .

[mohamedsief]

Man I've learnt a lot from your videos, you give inspiration and motivation to learn coding..
Thanks from Egypt ✌

[dfordemo]

omg, slidershow without javascript, cool man

[peepwebdev]

This is great, and you have no page jumping!! i have been searching for a pure CSS image slider. This seems to be the best model so far.

[lagimmediafiles]

The Best Youtube Tuitorial Channel i love html 5 and ccs 3....

[nitin-code-comedy]

I think it's much easier with js. Just move it on x axis by 100%.

[vipieri]

I was suffering to make an java slideshow work in my website, thank you!

[mr.webdev]

Cool stuff man! Keep up the good work!!!

[zina]

Brilliant use of input tag really. Awesome!

[srcreation]

You and your all videos are awesome bro
Thnks for helping us

[shariarhassan]

This channel is awesome!! god bless this channel.

[marcioferlan]

Would it be possible to also implement automatic transition? Like show the next slide after 5 seconds? I know CSS has some animations and transitions features, but I don't know if they could be used to achieve this.