CSS Slider: Image Slider with controls using CSS3 Only 

We can move image automatic by using small JavaScript on code. follow the link for JS : codepen.io/mayurbirle/pen/ppqRoZ?editors=0010

Thanks so much for the tutorial! Exactly what I've been looking for. Works great!

You made it soo simple and easy to understand, Thank You So Much!!!!!

Works Perfect! It was racking my brain for 2 days trying to find a good slider for my website that didn't use Javascript! Thanks

Nice job! Many channels make so much noise in the vid with annoying intro, etc etc.. you made it clear and simple, well done .. +1 sub

Awesome! I have been looking for this for two weeks now, LOL!

Finally a slideshow that works! Thanks

Thank you! The only one who worked without a problem!

Very good and simple code/explanation. Congratulations!

Thanks dude, your video helped me a lot ! You won a subscribed !

Thanks a lot. It helped me after a long day of frustration.

this is one of the best tutorial so far, thank you

Thank you very much. Very helpful video. Special thanks for giving the code link in description.

Perfect amigo, i am from brazil, is code my save !!!!! tanksss

Thanks man. You made it possible for me to get the project done. I am kind of struggling a bit understanding the z-index: -1 and 9 for the checked values though.

The best tutorial for image slider!! ghad thank you soooo much for your vid, it really helped a lot thank you ^_^

Thank you, it worked perfectly well!

Works Perfect! your video helped me a lot ! You won a subscribed !

Great one. It finally helped me :)

WOW! Thank you very much! This works perfectly and the code is simple)))

Wonderful. Strainght to the point

Thank you!!!! It was really helpfull!! Compared to what i watch the last time, too many talk and nonsense code adding to it-_-

thank you so much simple code this work perfectly

Work charmingly

you saved me, thank you

You're boss, thank you !!

Thank you sir it worked out for me 👍👍👍

Awesome finally learned 🤩

thank you!!! ;_; helped me sooooo much

Nice code, dude!

that's f'ing awesome!

Thanks a lot it worked true.

Thankyou it's a good tutorial

Thanks you so much !!

Thanks bro.........i like you video.

Tutorial is very pog

Really good code

thanks really helpful

Finalmente um slide show que funciona ! Excelente vídeo

Super!

i am from brazil! thanksssssssss brow!

That is pretty cool. Is this lighter for a browser compared if you use JavaScript?

thankx . really

Great

If you like, you can put that when the i are checked, each label dot lights up, like this: #i1:checked ~ .nav #dot1{ background-color: white; } #i2:checked ~ .nav #dot2{ background-color: white; } #i3:checked ~ .nav #dot3{ background-color: white; } You can also make the arrows appear, like so: .pre, .nxt{ width: 9%; height: 16%; position: absolute; top: 50%; z-index: 99; cursor: pointer; border: solid black; border-width: 0 5px 5px 0; } .pre{ left: 3%; transform: translateY(-50%) rotate(135deg); } .nxt{ right: 3%; transform: translateY(-50%) rotate(-45deg); }

os caras são muito bruxo!

Thanks

Very nice

I added "class='buttons'" to each radio button so that my CSS is just ".buttons {display: none}" instead of #id1, #id2, #id3, #id4, #id5 {display: none}. This allows a dynamic number of slides/images without changing the CSS. I also used display:flex to center the next/previous arrows (in your CodePen) both horizontally and vertically.

Thanks Alot

now that is how we want a tutorial to be

Can I use this by replacing images with a contact form or some sort?

WOW

HI! Your Video is really helpful!! But what if I have 12 id tags? What would be my z-index? I don't understand why did you come up with 9 if the #one is checked... Pleaseeee answerrr..

very nice! Is there a way to not stretch the images if they are not all the same proportions?

Hello!!! I am not familiarized with SCSS and I can't run your code... Is there a way to do it with CSS?

Hey man I loved your tutorial.. But, I got a question.. How do I add keyboard navigation to this, so that I can navigate the slider with the left and right arrow keys??

I am trying to add arrows on the left and rigt side of the slider but evnen though the arrows Z-index is lower than the navigations Z-index, the surface above the arrows is not clickable. Do you have any idea what could cause this problem? bedst regards

Is there an issue with the audio portion on your video? I am not hearing anything.

+subs

does it work without the radio buttons ?

I recreated the code in the video in brackets. The output I got was the images with elongated circles in the middle that I can click to change the image. But it looked nothing like the end result in the video. I was confused by what was being shown in my browser since the code was copied. So I decided to go to the codepen link and copy and paste the code into brackets. The result was just the images on the page without any styling. So I decided to make my own codepen account and copy and paste the code from the codepen link to see if on my codepen account it would look the same. It doesn't. It just had the images and no styling. Could someone explain why the results turn out different despite the same code?

mto bom

like!!!

Can you please make this silder autoplay by using JQUERY? And please explain the concept of making it autoplay as you did in the video above.

i have a problem i have tried 3 different variants of doing slide show and i cant do that i copied this code and the img are not in cointainer they are above each other i open with google chrome why>?

How to make it auto slider after every 5 seconds?

better do a video on text slider with controls as like image slider.

Could I use this Image Slider for my personal Website?

How would you incorporate something like this in a grid item?

I'm having some problem with the buttons cause it's not showing, I'm using brackets btw.. does anyone know how to fix this? Edit: I redid it and it works! There must have been a code i didn't input correctly, thank u thank sooo much again ❤️

Dear Sir, image slider is working fine on pc site but slider not showing on mobile. plz share code to add so that slider should show on mobile. plz guide me. Thanx Sir.

It's working but after putting it in my code my navbar is gone ? Putting navbar fixed isn't also helping

Ur work is good but the ur camera need a little bit of an update

hi, how i can use with local images in my pc?

I'm having some trouble with the previous and next labels. They're not working propperly. Pretty much every "next" label takes me to i1, and every "previous" label to i4. I'm pretty sure I got the code the same as you do, so I'm not really sure why is it failing.

I copied the code exactly, but it's broken. image are placed as single images rather than vied as a slider

It's so honoured I wanna know which editor do you use To see the output on the right of code

I did exactly like the video but my dotted bar appears at the top of the page instead. Can anyone help?

how would I move it automatically without javascript ?

How you reduce videos size which software you use

#i1: checked~#one{ z-index: 9; } not working don't know why

Which editor you using??

I can't understand what this symbol ~ means, could someone help me ? please!!!

Thank you very much for the contribution, I need some help with the creation of a page like Slides.com, if you have any input I would appreciate it.

it would be easier if there was some explanation while coding.

Hello sir how to use arrow in this tutorial

It's not working, it's just displaying a dummy slider template, but the navigation is not working, neither the side navigation, nor radio navigation both are just dummy template and are not navigating through the way you showed. What could be the reason

Can anyone tell me,, what is the name of this codding Software,,,, plz give me download link,,

Videos with no audio creep me out

How do I make this autoplay?

I don't why, it isn't working for me😓

PLZ GIVE ME THE CODE FAST PLZ

Sir all my images are appearing vertically

How to make it move itself

where is the code html

how to add keyframe autoplay? :-(

it's not working :(

Sound ni

too hard to understand for a beginner