Pure CSS Responsive Image Slider - HTML5/CSS3 Tutorial 

Finally a tutorial that just covers the basics. This allows us to go do more digging on our own without having to sit through a 25 minute tutorial of something way more complex.

I've literally never commented on any RU-vid video ever but I just had to, this is the best tutorial video I've encountered in my web dev career, very simple, straight forward and yet very effective, BRAVO!

Thanks so much, I have tried loads of these tutorials to make a responsive slider, but this is the only one I’ve had any success with. And you explained enough to tweak the number of images used etc. Well done you!!!

You are probably never going to read this, but my god am I thankful for this tutorial! I am very new to HTML/CSS coding and have been looking for a good tutorial for a slideshow for literally a few days. Yours was by far the best out of the bunch, so again: Thanks a lot! :D

simple and straight forward, i have finally find the tutorial i have been looking for. thank you very much

I was gone mad when the slides weren't working...then I came across your video and it made my all problems solved...thank you so much love you❤❤❤

this is so easy compared to other ones. thank you.

Fantastic tutorial, was looking for something simple without any external js or crazy css styling. It lacks buttons but gets the job done. +1 like from me.

best slider video on youtube,simple and easy to understand.Thanks brother 👍

I love you bro, this is really more easier and effective compared to other tutorials

10-image code. I've used images with the same ratio, not necessarily the same width/height: CSS: #slider{ overflow: hidden; width: 70%; } #slider figure{ position: relative; width: 1000%; margin: 0; left: 0; animation: 20s slider infinite; } #slider figure img{ width: 10%; float: left; } @keyframes slider{ 0% {left: 0;} 5.2% {left: 0;} 10.4% {left: -100%;} 15.6% {left: -100%;} 20.8% {left: -200%;} 26% {left: -200%;} 31.2% {left: -300%;} 36.4% {left: -300%;} 41.6% {left: -400%;} 46.8% {left: -400%;} 52% {left: -500%;} 57.2% {left: -500%;} 62.4% {left: -600%;} 67.6% {left: -600%;} 72.8% {left: -700%;} 78% {left: -700%;} 85% {left: -800%;} 90% {left: -800%;} 100% {left: -900%;} } HTML:

this was that video i was waiting for

brilliant this is the kind of tutorial i've been searching for thankyou very much it was easy and effective

3:46 i have the exact same code, but i don't know why my images wont slide #slider { overflow: hidden; } #slider figure { position: relative; width: 500%; margin: 0; left: 0; animation: 20s slider infinite; }

Thanks ! Very good to begin learning sliders with CSS.

Thanks man kudoosss your style worked like magic

Thank you so much! It helped a lot.

@w3newbie do the images need to be the same size or resolution? I've been having difficulty trying to design a carousel.

Thanks somuch I was searching for this

bro such an elegant solution very nice ! kudos

The best slider tut🔥

Thank you very much for the turorial, your video was a great help to me

Hello, i have the same problem, but i cant fix it, i want to put 5 images but after the 5th, there is a "bug", the screen appears white, and starts again (with the 1st image) like 1 second after, i put -500% in the keyframes, but the problem didnt dissapear. How did u do it? I want to show 5 images, i have the figure tag like this: And the keyframes like this: @keyframes slider { 0% { left: 0; } 10% { left: 0; } 20% { left:-100%; } 30% { left: -100%;; } 40% { left: -200%; } 50% { left: -200%; } 60% { left: -300%; } 70% { left: -300%; } 80% { left: -400%; } 90% { left: -400%; } 100% { left: -500%; } } whats wrong?

Thank you for this tutorial, it really helped me!

Excellent video!!!!! I have tried it and it is working nicely. Thank you.

or can you explain how the @keyframes is supposed to set up, cause there must be a way to do it so it can work with any numbers of pictures you have to insert in the slide....! I put it in a div after the menu list, it push the menu down when I try to resize the div so it can fit in my screen, of course, the menu gets back on the top, but never get it correctly fit the div slide..

Thank you so much sir, I appreciate a lot. Your material was short, sweet and effective and it worked so fine with my project. Thank you again, I want to learn more please add some more contents and ideas.

Very simple , clean e nice example

so good! thanks for the help!

i'd like to thank you a lot . because it help me to be good at in css.

OHHH MY GODDDDD. SUPER ............. VERY VERY THANK YOU SIR, THANK YOU , THANK YOU

This is great! Thank you!

thank you

Thanks it helps a lot

This is a great video. Thanks for sharing the knowledge! :)

Thank You So Much This Lesson Is So Good

Thank You Very Much, Sir !!. It Worked.

Many thanks, great CSS code :)

Its amazing you're awesome.

really very nice and easy tutorial in comparison to other tutorials I watched on youtube explanation sir Thanks a lot

How do I get rid of the large white space at the bottom of the image? It leaves major distance between my slideshow and the information I wrote for the website

you are awesome bro this method is awesome cause I saw another tutorial about this, and they messed with the animation times for every nth:child in image, this was way shorter and awesome

after using this code my responsive hamburger menu dident show up when on a small screen also the nav bar on the large screen is very small please can you help

What should I change to customize the height of it? And where? I tried everything I could think of, but Im quite new to html and css... pls help

You are Amazing💯💯 Thnx man🔥⚡✨

thanks bro for learn to make image slider love you

thank you sir for this video.. it helps me a lot!

Thank you so much for this tutorial! It helped me a lot! MORE IMAGES: I made some changes in order to use with MORE IMAGES / PICTURES. Here is my code: CSS: #slider { overflow: hidden; } #slider figure { position: relative; width: 1000%; /* 100% for each picture, 10 pictures = 1000% */ margin: 0; left: 0; animation: 40s slider infinite; } #slider figure img { width: 10%; /* 100 / 10 pictures = 10% */ height: 700px; /* to set a maximum height */ float: left; /* next 2 to continue responsive with the maximum height */ max-width: 100%; min-height: 100%; object-fit: cover; } @keyframes slider { 0% { left: 0; } /* you must divide 100% fot the amout of images you have */ 7% { left: 0%; } /* these intermediate steps (7%, 17%, 27%, ... will make the transition speed faster */ 10% { left: -100%; } /* because my total width: 1000% (10x 100% for 10 images), I will use 10% for each image */ 17% { left: -100%; } 20% { left: -200%; } 27% { left: -200%; } 30% { left: -300%; } 37% { left: -300%; } 40% { left: -400%; } 47% { left: -400%; } 50% { left: -500%; } 57% { left: -500%; } 60% { left: -600%; } 67% { left: -600%; } 70% { left: -700%; } 77% { left: -700%; } 80% { left: -800%; } 87% { left: -800%; } 90% { left: -900%; } 100% { left: -900%; } } HTML:

a big thank you!

Thanks mate for the tutorial. It was indeed very helpful. My question is how do we calculate percentages during @keyframe for six images

amigo, eu não entendo inglês, mas você me ajudou muito. Muito Obrigado!!! Abraços do Brasil

Is it possible to add button to the left and right to control the img, and will the button breaks the site ? i mean they are not responsive if set them to position absolute

Its working...Thank you man...

Keep up the great work

Super helpful and simple, thanks. Would love to see how to trigger advancing slides with a button.

What version of sublime text did you use for this work? Is the sublime text registered?

easily the best tutorial for a pure css slider ... is there an option to like a video 20 times?

hi bro thank you so much for this great video.. ♥ i have only 1 issue.. when i add links with images .. last image don't stay for 5 seconds it takes only 1 second and then don't go to back to 1 image like slide . it only jump to first image.. can u plz tell me he solution . my english is not good but i hope u understand my issue i m using like this

Thank you so much bro.. , you really helped me.

this has been awesome! Question. I want to put some social media icons into the slider rotation, but I want the images to be a different size than everything else in the slider rotation. How could I do that?

short but excellent.. !!!

thanks a lot sir, you save my day, i really appreciate

Thank you for your information it was helpful for me to create a project

Great Vid!!! congrats!!!

I dont know I downlaoded pictures of same size 1920x1280 but it didn't work correctly one image was below other and when its moved to left its more messier cuz it stops in the middle.

Awesome!!! TQVM!!

what should I change in coding if I want to make 8 images to slide? You have inserted 5 images in slideshow, how can I make it slide 8 times for 8 images?

This slayder is the best

This is a great video.

it work for me, but i have a question, does the number of picture is matter, cause when i'm making it with 5 image, it works nrmaly, when i add one more picture, it breack up, had try to resize the slider or the slider figure img, kind of works but not totally, can you please explain if there's something that must be done either on the @keyframes or the size of the slider...?

Thanks you make it very easy

Thank you buddy.....

the animation: 20s slider infinite; code doesn't work. why is that. i have done other totus on slider but there is always a problem. i follow the text by the letter...

Is it possible for you to redo a video where you can put the slider into a container that has its own size

Please where did you get your high quality images

thank you!

The image slider is responsive and easy to learn, understand and compare the code (probably also great for sending a newbie friend as well)... but the images appear stacked... so the slider does not move even though all of them are 1280x720 pixels. Please HELP!!!

nice video

How to make the slider have a text above the slider , with condition of the text is not moving

i just had one problem it was not sliding like from 1 imige to 2 and from 2 to 3 it was like 1-3-withe picture-2-white picture and i dont had white picture anything eles is perfect if u can help me with this i will be so grateful

Awesome!

what about slider control buttons for next or previous image? or did i missed this.

i needed to do some adjustments but still really nice tutorial!!

Good one!

why the last photo slide finish, but did not continue back to the first photo? Need for wait for some time only will repeat again

thanks you helped a lot

Thank u so much for this

#slider figure img { width :20; float: left; } It doesn't float to left when I get to this point. The size of my 5 images are 1750 by width and 1167 by height.

yup.....it works...thnxxxx

yo thanks bro for this tutorial

Thank you so much...

not able to push images to the left even if i type the exact code

Thank u so much

Hey, you tutorial is fantastic! But for my case, it is not working well. I want to add more than 4 images and once i add, let's say 5, the fifth one goes on a new line underneath the carousel. Could you give me a feedback on why is this happening?

Great job..

hey it was an amazing tutorial compared to some other tutorial around where they won't share the css setting, but i mean seriously this one really helping me to finnish my homework but igot some problem here , the transition between image won't work that smooth, what should i do to fix that ? oh and btw i'm using 3 picture with the settings that you've been told on the comment section down bellow . Thanks^^ Greetings from Indonesia

best tutorial thanks

Thanks!

Thanks it works✔️✔️✔️✔️✔️