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

React Simplified Course: reactsimplified.com/?...
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:
React Simplified Course: reactsimplified.com/?...
GitHub Code: github.com/WebDevSimplified/r...
CSS unset Property Video: • Do You Really Understa...
CSS unset Property Article: blog.webdevsimplified.com/202...
Skip Link Video: • Why Does Nearly Every ...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:02 - Image Slider #1
11:52 - Image Slider #2
21:51 - Image Slider #3
#ImageSlider #WDS #ReactJS

[@nove1398]

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.

[@oscarh4066]

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

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

[@slinco65]

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

[@diogenespasqualoto1675]

O nome do canal é WDS

[@pedromenezes4013]

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

[@user-qj4rr1rm8i]

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

[@xav_624]

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

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

[@leosombra8708]

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

[@jhontriboyke5534]

The accessibility part is really amazing! thank you Kyle

[@danielwinkler1910]

insanely good tutorial, well done :D

[@parmjeetmishra2]

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

[@Veedsify]

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

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

[@goodtimeswerehad]

Another brilliant video Kyle, thank you!

[@rico5146]

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.

[@rdalert3]

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 😍

[@re.liable]

Nice. I expect to be coming back to this video a lot. Please do not take it down 🙏🏼 And many thanks for sharing I suppose I'll figure out next how to lazily load the images

[@theisoj]

Thanks Kyle as always! 👍

[@Trazynn]

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

[@benjaminfourgeaud7707]

As always, excellent tutorial ! The acessibility is a nice add-on feature no one thinks about. But the things that I am missing, is the scroll capability, to have that Slider work on mobile ... Hope you will cover that in a follow-up video ;)

[@jamesgriesedieck5116]

thanks for the informative video! I would love to see an auto scroll feature as well!!

[@bobdpa]

Lots of great info here. Thanks! 💯

[@user-vu9dl3vn7l]

Thank you so much for this helpful tutorial!

[@jasongrant2366]

my man never disappoints

[@yaroslavoz]

Thanks, man👏

[@user-pd2ic5pd3z]

Nice. I really appreciated how clear and concise your instructions were. However, I was wondering if you could provide some guidance on how to make the slider slide infinitely instead of going back to the first slide.

[@shahzadasultan2456]

Your content is what driving my career , Thank you Man😇

[@Mauro0]

Watch the video first maybe ?

[@solidsnake1120]

I would LOVE a Firebase Realtime Database tutorial with that React Firebase Auth video you did!

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

[@Evil_E_ye]

Just use Image tag in next js😂

[@MirkoVukusic]

​@@Evil_E_yeyes, it's one way of solving some of the issues mentioned, but not all. I.e. preloading next image (so swyping does not always end up with a loading indicator) needs to be programmed

[@Evil_E_ye]

@@MirkoVukusic you are correct ✅ here.

[@johncerpa3782]

Excellent video

[@anand_dudi]

Thanks for this masterpiece nd i have a suggestion if you could make videos on every react library functionality as SwiperJS provides same slider so it will help us to understand react in depth 😊 Thanks again

[@atanu_200]

guorgous 😍, I haven't added this much accessibility features for my projects, but now I will add all this and grateful to you kyle for this. it's great to have this kind of content free on KZbin. Thank you Kyle....

[@aqibmalik6313]

i admire ur content and wait restlessly for ur next video Love from kashmir, India Aqib Malil

[@sagarchilivery6112]

Love from India ❤

[@Matt23488]

CSS needs a style property for making something hidden except from screen readers. It's kinda crazy you have to remember to do all of those things to make sure it behaves that way.

[@jacobrichard2342]

You are the best !!!

[@MrJacquers]

Very nice. How would it handle 100 images though? Guessing it would render far too many buttons :)

[@imnikki00]

Thanks kyle❤

[@Di-yes]

30:00 Oh, man, please, can you tell me does aria label really works for section? Cause I really searched a lot, but only found that you can use it on and interactive elements only. Will be really grateful for answer. Thanks

[@jazzdestructor]

Final Somebody with a proper accessibility video, i had to struggle so much to get this information previously (literally sat with react mui and kept checking why they used those labels there), if possible could you do video in depth about accessibility? The various other labels used. also in mui tab indexing when opening a modal takes you to modal fields, instead of the entire page behind i think they might be using content skip to go to the modal div, incase its something else do reply to this comment so that i could learn some new stuff. cheers🍻🍻👍👍

[@GabrielSoldani]

Nice video. One thing that is always missing though is when you have images with different aspect ratios. It’s surprisingly finicky to constrain the gallery to the viewport dimensions while respecting the image’s aspect ratio, not running into layout shifts while the image is loading, and adding padding and controls around the image instead of on top. Recently I wrote one and I still haven’t landed on a solution that plays nice with server rendering and renders correctly in slightly outdated browsers. It’s no wonder you can still find companies selling lightbox components with an expensive commercial license.

[@WebDevSimplified]

This slider will deal with images that are not the same aspect ratio. If you wanted to use images that are drastically different (such as 9:16 and 16:9) then you would probably want to change how the CSS object fit is instead of using cover.

[@DioArsya]

amazing! :)

[@aakashsrivastava5557]

Great content

[@cogitativeCoder]

can you make a video on logging. like winston, ELK, EFK and frameworks please

[@w1nd251]

How do You format all the code in one click? What do You use?

[@gliderguld]

Great. But shouldn't left and right arrow trigger slide (when focus is within this group)?

[@Wilespro1]

You should make a similar video but with an infinite carousel

[@mostafazieada3765]

Really 👍👍👍

[@punch3n3ergy37]

What about Sliders that contain images with different sizes? How would you handle that? Maybe you can do a video about that :)

[@rico5146]

We can handle that problem by setting a property object-fit as cover on image. But the image aria outside the container boundary will be cliped.

[@muhsin8604]

Nice

[@justsample9185]

Personally, I find it confusing why you set translate on each image. IMHO, a better approach is to set the translate on single div wrapper around the images

[@mecozir]

test caller slow source validation with is element for dynamics passing should auto lock

[@sahilverma_dev]

and now I am waiting for advanced slider. 😎😎

[@beinyourguard]

it's already advanced enough. less is more.

[@w1nd251]

it's not optimized like at all, try using 20 images, lagging.@@beinyourguard and i'm using 4k images, so it's really laggy

[@beinyourguard]

Kyle, how did you open that little menu box and imported useState at 3:09? what's the keyboard shortcut?

[@MarvMarv397]

I think „cmd“ + „.“ on mac. But when you hover over a not imported dependency, vscode should show you the shortcut in a popup.

[@bouwensr]

Why do I never see a slider that mix portrait and landscape and allow to rotate

[@mecozir]

log in string allow app and load function decompiler item

[@magnuserikkeenrobot1117]

How good is Image slideres like this for mobile @Web Dev Simplified?

[@ThugLifeModafocah]

Thank you for the content. It would be awesome if you create content about material design 3 image slider (carousel). It has some very beautiful properties and behaviors. It would be cool to see it implemented with tailwind and react. Anyways, thanks.

[@mecozir]

overried template async tool view is context original error and platform code plugin

[@GreenLikeGrass]

should the dots really be aria-hidden, since they are interact-able?

[@WebDevSimplified]

The buttons are the interactable thing (not the actual dot icons) which is why I hid the dots, but not the buttons.

[@wkmgaming6097]

I want to fixed the dots number just like airbnb card slider means if i have 20 images i want to show only 5 dots and when the slide move the current dot is show how to do could not find any good solution?

[@jasongrant2366]

Ok so I wanted to implement this to my website, but i encountered a small but important issue... my images are stored in AWS, and you know the drill. When the a button of next or previous image is pressed, it takes too long to make a change, I don't want to optimize them as this is where only one will load at a time and will allow the user to view the image at it's finest, but what i do ant to do is show a spinner or something while the other image is requested. I tried const [loading, setLoading] = useState(true), but it's just not exactly what I need. If anyone has a solution, please let me know. Thank you!

[@rickpatinor]

Is a great video! But, It will be nice to see how you set up the project in VSC. Everything is already created when you start the video. So I can't even begin to follow you...

[@mecozir]

origanal task file width drag push

[@mecozir]

signals element process default change export before statement exit

[@mecozir]

leaks tool entity does around

[@RishiRajxtrim]

👍💯

[@CodingSumo]

can anyone help me how to change image when user try to swipe on phone

[@AyoubRABIYAE]

❤❤❤

[@EvertJunior]

unfortunately this doesn't cover touchscreen users, it's not trivial to make a responsive slider specially if you need controls and track index, that's why I always use Swiper library but I wish this was browser native

[@MirkoVukusic]

What I do is use scroll on images container div, instead of transition like in this video. Then you can do snapping and smooth-scroll with a few css lines. For touch screens, css touch-action is very simple and it works like that on mobile without any additional JS code.

[@CWhitmer22015]

Amen, that is what I do now as well. All the scrolling is built in and most stuff is handled by the browser. I have stopped coding and using slider for this approach. Much easier for the user as well.

[@amansaxena4827]

👍

[@johnmishell234]

I don't get how in 2023, you still have to code up an image slider yourself. Why is there no standard html element for ui elements like this? It just takes way too long to update html standards.

[@curcodes]

U don't, they are a lot of libraries for that. But knowing how to build it for yourself gives you more understanding

[@faizanahmed9304]

This proves how deep understanding you know about your tech. Knowing from ground level is the thing that separates a great developer from the average ones who just copy pastes the library code.

[@josephmonyoro5129]

Cause it’s fun

[@johnmishell234]

Yes there are libs, but it's just ridiculous that there isn't say an html element in which you can nest . No standards, everyone codes up their own crappy versions and that's for nearly every ui element

[@mantas9827]

I thought the same, on the same note, how are we just now getting popovers?

[@kokojolo]

😘😘

[@adenugbamicheal2140]

Pls simplify real world project

[@fullstackprojects5615]

idea copied from monsterlessons