How to Build HTML Slideshows With CSS Only - No Javascript

[@RickParkerGoogle]

That was awesome! Thank you so much. How difficult would it be to add an automatic transition function to the slides, while still allowing the manual buttons as well? That way the slides will change even if the user doesn't click, but also give you the ability to jump back to an image.

[@AdyNgom]

+Rick Parker Not difficult at all with the help of a little Javascript. Let me know if you want to see how it's done and I'll shoot a video for it. Cheers

[@AdyNgom]

Let's build not one but two css sliders in this series - the first one will tackle cross fade animation and the second will use the translate property to slide content into view. No Javascript voodoo needed just pure CSS magic Watch both here: forthehackofit.com/build-two-css-content-sliders/

[@turboromy]

I think I'm seeing ~ for the first time as in .black:checked ~ labels > .b-label What is it even called ? I guess > is to select child. ~ seems to be ignored by search engines. And from the link of jsfiddle, what does "background: url(bg.png) repeat;" do? Where is that bg.png ? Thanks for the great video.

[@Lrspr]

Great tutorial. I was able to follow it to the letter. What code should I use to auto forward the slides automatically so that they rotate like a carousel every few seconds? Thanks and good job !!

[@AdyNgom]

Awesome!! I'm glad to hear that it was useful. Now if you want to do automatic slides it's doable with little Javascript help. You can still achieve it with CSS but I think the amount of code needed would be an overkill. Here is what the Javascript would look like for the autoslide: (function() { var slides = document.getElementById('slides'), btns = [].slice.call(document.querySelectorAll('.rnav')), max = btns.length, index = 0, autoslide = autoSlide, slideSpeed = 4000, timer; function autoSlide() { btns[index].checked = true; if (index < max - 1) { index++; } else { index = 0; } timer = setTimeout(autoSlide, slideSpeed); } // pause the slideshow when user clicks anywhere in the container slides.addEventListener('click', function(e) { clearTimeout(timer); }); autoSlide(); })(); You can check the result here: jsfiddle.net/fj61p00b/29/

[@bens2890]

hey i have entered everything correctly and its only showing five of my pictures what could i be doing wrong on there

[@sumercoding9299]

May I post this video to my channel to increase knowledge

[@AdyNgom]

Please share and thank you for finding it useful

[@NOSHITV9]

It is pretty good, but only problem is the slides are not automatically moving side by side. They are moving when we click on the corresponding button. Can we have any code in this to let them play automatically...??!

[@AdyNgom]

+Radhamdhava Rasaranjani Indeed the trick was to show how it is setup with CSS only. A lot of people are asking for the autoslide version. I will shoot a new one soon showing how to add autoslide with JS on it.

[@Bravox84]

try keyframes for css only autoplay

[@Robert-be4bj]

what if i want text under each photo ?

[@zeroxcold3320]

This was very helpful MaN . ♥ Thanks for Making this video

[@AdyNgom]

Awesome!! I'm glad it helped

[@Cioxic]

Hi Teacher Ady! your tutorial are amazing and i success build my web with slider using your codes. but i have a question, my radio button cannot function very well. ex: when i click the first button, the image didn't appear. may i know why? hope you can help me. tq

[@Cioxic]

at first it appear. but after i try click another button and try to click again the first button, it cannot appear the image.

[@AdyNgom]

Hello, glad you are finding the tutorial useful. I'll be glad to help you debug your code, but you will have to post it somewhere where I can see it. Use jsfiddle.net or plunkr.com to put the code there and share the link. Thanks

[@sabicapardesi642]

This really helped me! Keep it up!

[@AdyNgom]

Im really glad it did help. Cheers :)

[@Jurrianwitmans]

everything works great, but when i want to make a second slide on the same page it doesnt, i just copy pasted everything and it doesnt work, is there a way to fix this?

[@AdyNgom]

Hello, it's easier for me to help you if you were to post your code on jsfiddle.net or Plunkr. I'll gladly take a look

[@jockeyfernandez566]

Thank's Bro Thank's....!! it's working !! AMAzing

[@AdyNgom]

glad you found it useful :)

[@SamSam-zn4ym]

Very good man

[@knownbymany]

Hi,can u please help me ? i did everything like u and my chacked labels wont change color into yellow,i dont know why ?

[@knownbymany]

checked * ...please answer me its really imortant for me :D

[@AdyNgom]

+Ivan Ilic please check this fiddle: jsfiddle.net/adyngom/fj61p00b/ be very careful with the spelling. For the labels the div containing them should be a sibling to the boxes div and not a child of it. Let me know if that helps.

[@knownbymany]

+Ady Ngom ok, can u write me here what is wrong ? .yellow:checked ~ .labels > .y-label { background-color:#E7EC1C; } Everything works fine,just checked label wont change background color ,and i dont know why? i spent 5 hours last night trying to fix it,but i just dont know how ? :D

[@knownbymany]

+Ivan Ilic btw, everyhing works fine for opacity , so i guess that my spelling is good,and i also tried ".yellow:checked ~ .labels + .y-label { background-color:#E7EC1C; }" and is not working, so please answer me even if u cant help me so i can try it with jquery, and delete this :(

[@knownbymany]

+Ady Ngom ok sry for spam,i just copied your css and html,changed images,place and its working,its magic :D

[@ayasantos4275]

can you pls help me mine's not showing any pic just the radio button?

[@AdyNgom]

hello +Aya Santos check this fiddle jsfiddle.net/adyngom/fj61p00b/ be very careful with the nesting of the boxes div and the labels they are siblings not parent child. Hope it helps :)

[@Ventik]

Hello, whats the code, for a automatic slideshow? So the Images slide automatic and i click on a Bubble, the image was open. Thanks

[@AdyNgom]

Hello, to do that you would either have to use keyframe animation with CSS or use Javascript with a timer

[@Ventik]

okay, how does it work with css? I need a approach.

[@AdyNgom]

you could read more about keyframes animation here developer.mozilla.org/en/docs/Web/CSS/@keyframes I would love to do a follow up or a new tutorial on that when time allows

[@Ventik]

Thanks for your help

[@paolamonnihenderson]

Great video! Thank you

[@MamadouSadio]

Nice job

[@moonyeah4560]

If i use it for my website Will i have copyright problem ? I mean If their any copyright on the page who contain it is it a problem ? :/

[@AdyNgom]

This code is under the DWTL license, meaning do whatever you want with it no restrictions. Please note that the image are under copyright and I don't own them. You can copy or fork the code directly using this link jsfiddle.net/adyngom/fj61p00b/ Build something awesome and don't forget to share. Cheers :)

[@moonyeah4560]

+Ady Ngom i see Thank you for your kind reply ! I sub :)

[@mohammedsharukh3809]

can we make them slide automatically using only css and html??

[@shifasante3096]

+Mohammed Sharukh though we could make it slide automatically with HTML and CSS only using keyframes for example, it can be a bit tedious to setup and maintain in the long run. Automatic slide with JS is much simpler

[@ferdauzimacarongon5865]

can i copy and paste this code cause i really want this in my system, but i promise that i will just edit everything, i am a student and we are making a online system and i really need this slider to make our system nice;

[@AdyNgom]

+Ferdauzi Macarongon this is under "Do Whatever You Want With It" license. Feel free to use it however you see fit. As long as you learn something from it :)

[@ferdauzimacarongon5865]

Ady Ngom thank you so much for your help, i hope you can help more student or people that need this kind of code.

[@andreacalenda7321]

Nice work.

[@shifasante3096]

+andrea calenda thanks :)

[@premier69]

Thank you very much for your hard work!

[@AdyNgom]

Thanks +premier69 - glad you liked it

[@MamadouSadio]

Should be nice if we could have a way to download samples of the code in order to try it by ourselves!

[@AdyNgom]

Hi Mamadou Sadio thaks for checking it out and liking it. Below is the address of the starter template you could use to follow along. gist.github.com/fth-tuts/237b7d893234713600a8 I will update the blog post with some of the code. Thanks for the feedback

[@MamadouSadio]

Okay...will do :) !

[@AdyNgom]

Hello I'm seeing a lot of comments asking why it's not working for them. I have made the code available in this fiddle jsfiddle.net/adyngom/fj61p00b/ Pay close attention to the syntax and the nesting of the elements. Cheers :)

[@aliounekounta4767]

Tonton Ady Ngom