Pure CSS Responsive Image Slider - Only HTML & CSS

➢Tutorial Files Download: m.w3newbie.com...
➢Courses: w3newbie.com/c...
➢Website Hosting: w3newbie.com/b...
➢Website Resources: w3newbie.com/r...
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!!💐

[@Mohamedmohamed-yr5gi]

Thanks

[@josephdickson5082]

This is best carousel video I've ever seen

[@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

[@muhammadbinsaleem8565]

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

[@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.

[@apoliom6]

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

[@moadbm2033]

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

[@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.

[@karunanithir1510]

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

[@foreverlalala]

very well explained! thank you!!

[@maruchoo]

thank you so muchhh broo, you really helped me

[@rhymekidstv]

Thank you for this video😊

[@rayyanabdulwajid7681]

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

[@gemrgz6577]

Thank you so much!!!!

[@anilmelinmani9928]

Helped a lot
Thanks!

[@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%;
}
}

[@acushlakoncepts]

Nicely done

[@GeorgeNascimento08]

is where buttons?

[@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

[@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: th-cam.com/video/iiUtzrC5BPE/w-d-xo.html&t

[@jeramycruz1993]

javascript

[@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

[@shahanajleget9838]

Thanks sir

[@angelwillis2739]

images aren't sliding

[@vaibhzDixit]

Nicee

[@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).

[@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

[@90andresramos]

Responsive?

[@digimentorz5547]

Are you sure this is responsive ?