How To Create 3 Levels Of React Image Sliders - Beginner, Intermediate, Expert

Image sliders and carousels are incredibly popular on the web but 99% of tutorials do them wrong. In this video I will show you three different ways to build an image slider from beginner to intermediate to expert. By the end of this video you will have an image slider that is better than any other image slider.

Also, I want to note I am not at all an accessibility expert. I am still quite junior when it comes to advanced accessibility features so if I missed something related to accessibility please let me know in the comments.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
01:02 - Image Slider #1
11:52 - Image Slider #2
21:51 - Image Slider #3

#ImageSlider #WDS #ReactJS

[slinco]

Kudos for adding the accessibility details. So many tutorials leave off this very important part 👍

[MattHanes]

This was excellent, I love how you included all of those accessibility features that are so often overlooked. I expected the aria-labels, but adding the content skipping was something I never thought about. A cool follow-up vid might be to show how to make the slider swipeable for touch users like on a phone or tablet.

[nove]

I really appreciate videos like these, where we get to see it all from start to end. Personally, I believe building out small projects like this helps to teach many small important bits.

[Veedsify]

Everytime i think i know css, kyle comes up with features that makes me feel like a beginner again

[leosombra]

thank you. I'm from Argentina, and it's the first time I see your content, you're great. I recommended your channel to my friends

[rico]

Great! One thing i just want to mention is that i think it is fine to only control z-index property of skip link button in this video. It seems that the button doesn't need to be squashed at all by setting each properties width and height by 1.

[xav_]

I really enjoyed the accessibility part. Very instructive content. 👍

[풍월상신]

Everything I need to know about the accessibility part. Thank you Kyle.

[developerpranav]

The version 3 with accessibility touches is super helpful, I'd never have known anything beyond the version 2 until now. Thanks for the great tutorial, wanna get your Next.js course soon ❤

[jhontriboyke]

The accessibility part is really amazing! thank you Kyle

[parmjeetmishra]

Well this was very complicated for me from the start. but finally i understand completely. Thanks

[OcularLux]

Awesome straight forward video! I'd love to see if it's possible to make the transition from the start or end of the carousel content look like it's infinitely looping rather than quickly sliding to the opposite end.

[rdalert]

you have no idea how frustrated I am with ready to use sliders libraries, I always wanted to create my own component just never had the time.
thank you very much 😍

[xphstos_]

Images are inline objects and as such they align vertically with text baseline by default. In typefaces we have ascenders, baseline and descenders. Since by default the image aligns in baseline it leaves a small gap in its box model.
You can either set the image as a block element and break that connection with type or set the vertical-align rule to middle.

[MirkoVukusic]

I think it's really necessary to add lazy loading of images and possibly also preloading the next one + blurred image placeholder while loading.

[pedromenezes]

It's really cool to see accessibility on a tutorial. Also really liked the accessibility button tip inside dev tools!

[brainftv]

Thanks Kyle! The whole idea of rendering all the images to animate them more easily, never occurred to me! Elegant. Challenge to you and the rest of us: how would you make the images "drag" with the mouse, or in the case of mobile website drag with a touch event?

[INetreba]

Wow, that's a great approach to demonstrate the development process!

[Trazynn]

Teaching React this way is way more useful than all the abstract stuff.

[oscarh]

Great content, Kyle! Appreciate seeing the progress of the different versions of the slider.