Pure CSS Responsive Image Slider - Only HTML & CSS

➢Tutorial Files Download: m.w3newbie.com/w/tutorial-46.zip
➢Courses: w3newbie.com/courses/
➢Website Hosting: w3newbie.com/bluehost
➢Website Resources: w3newbie.com/resources/
In this video we'll create a Pure CSS Responsive Image Slider using HTML5 and CSS3. We'll use CSS Keyframes to take advance of Animation using just HTML and CSS.
Popular Pure CSS Responsive Image Slider Tutorial:
• Pure CSS Responsive Im...

[@buckwheat_flower]

i have seen numerous videos on image slider and this is the best one and the easiest one for someone unprofessional like me. Thank you so much for the easy illustration! Please keep up the amazing work!!💐

[@gmanpublications]

Is there a way to do this with Flexbox? I ask because this isn't working. I have 8 logo images and they are showing larger than normal and still are showing 2 rows.

[@foreverlalala]

very well explained! thank you!!

[@apoliom6]

Dude, you're amazing, thank you!!!!!

[@anilmelinmani9928]

Helped a lot
Thanks!

[@karunanithir1510]

Sir how to use array function to represent images in this code if the images are about 100.

[@moadbm2033]

how can i position the slider side by side with a text or put a text or button in center of slider

[@rhymekidstv]

Thank you for this video😊

[@josephdickson5082]

This is best carousel video I've ever seen

[@muhammadbinsaleem8565]

Man IDK who you are but I one thing I want to tell you, you made me your student...

[@acushlakoncepts]

Nicely done

[@maruchoo]

thank you so muchhh broo, you really helped me

[@user-pu3jn9qx2m]

that was soo helpfull amazing work thank very much 🤝🤝🙏

[@TheSkyGamez]

clickbait
in the thumbnail were buttons for every image and buttons to go left and right, completely skips this in video

[@gemrgz6577]

Thank you so much!!!!

[@rayyanabdulwajid7681]

Why don't you use scroll snap feature in css?

[@usmanmughal5916]

How do I type text Over this SLIDE? It just appears below the slide.Even i used absolute position with z-index -1 for slider it works but it brings the bottom left-right scrollbar.

[@omarmarawan5506]

Hmm Try making the img a background image instead

[@ahmedlaouini3544]

thank you so much

[@lebogangnkhuna2592]

Hi, How can I add arrows on both sides. If I don't want an animation. Just want people to click, to the next picture.

[@w3newbie]

To have it slide automatically and have the prev and next buttons you might want to consider checking out my "Bootstrap Slider" video here: ruclips.net/video/iiUtzrC5BPE/видео.html&t

[@jeramycruz1993]

javascript

[@jeramycruz1993]

im doing a three image side with 20s slider i cant seem to get the @keyframes right please help

[@gazza363]

try this
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}

[@tanercoder1915]

I was hoping you make inputs for switching between slides. but it was same as your tut from 2018. need to learn how to control this with inputs.

[@w3newbie]

I have made an image slider like this but it is very complex with only CSS and the video would be super long. For this, I recommend simply using Bootstrap. See my Bootstrap slider video to see what I mean.

[@Mohamedmohamed-yr5gi]

Thanks

[@shahanajleget9838]

Thanks sir

[@vaibhzDixit]

Nicee

[@mostjharnabegum942]

how to make the slider from bottom to top? i really need your help. because your video is easy to learn

[@darrenchristian3268]

U can make the figure element display:flex , and flex-direction:column, then for the animation instead of using translateX use translateY

[@GeorgeNascimento08]

is where buttons?

[@90andresramos]

Responsive?

[@flameon3dstudio483]

For 6 images how will I go about it

[@w3newbie]

Change the keyframe percentages so there are more pauses and the width (in 100 x # of photos percentage).

[@angelwillis2739]

images aren't sliding

[@digimentorz5547]

Are you sure this is responsive ?

[@VolRecon]

What is happening when i have 5 diferent size picture and i want hight: 100vh?? No longer works...

[@mvpdustin843]

do a css rule like responsive picture add height and width and then put a id in any imp or just in the div container