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

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

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

[@oscarh4066]

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

[@slinco65]

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

[@diogenespasqualoto]

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!

[@xav_624]

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

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

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

[@user-qj4rr1rm8i]

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

[@goodtimeswerehad]

Another brilliant video Kyle, thank you!

[@jhontriboyke5534]

The accessibility part is really amazing! thank you Kyle

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

[@danielwinkler1910]

insanely good tutorial, well done :D

[@bobdpa]

Lots of great info here. Thanks! 💯

[@iamjvfs]

Really next level, thank you!!

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

[@user-vu9dl3vn7l]

Thank you so much for this helpful tutorial!

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

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

[@Veedsify]

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

[@parmjeetmishra2]

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

[@jamesgriesedieck5116]

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

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

[@theisoj]

Thanks Kyle as always! 👍

[@OcularLux59]

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.

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

[@jacobrichard2342]

You are the best !!!

[@yaroslavoz]

Thanks, man👏

[@jasongrant2366]

my man never disappoints

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

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

[@johncerpa3782]

Excellent video

[@DioArsya]

amazing! :)

[@imnikki00]

Thanks kyle❤

[@aakashsrivastava5557]

Great content

[@shahzadasultan2456]

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

[@Mauro0]

Watch the video first maybe ?

[@Trazynn]

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

[@clevermissfox]

I was worried about the accessibility until i got to Slider 3! Shouldve had more faith❤

[@solidsnake1120]

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

[@aqibmalik6313]

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

[@sagarchilivery6112]

Love from India ❤

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

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

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

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

[@mostafazieada3765]

Really 👍👍👍

[@gliderguld]

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

[@cogitativeCoder]

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

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

[@mecozir]

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

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

[@trade_wiser3144]

@@Evil_E_ye can you please explain, how it will work ?

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

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

[@Wilespro1]

You should make a similar video but with an infinite carousel

[@mecozir]

log in string allow app and load function decompiler item

[@omobayodeosinubi1964]

This is great. can you add an auto slider to it?

[@MrJacquers]

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

[@muhsin8604]

Nice

[@oh-digital]

Autoplay would be a nice addition

[@smithan3001]

Do have a video for adding autoSlide prop?

[@mecozir]

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

[@25castro25]

Are you using Prettier to format on save?

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

[@w1nd251]

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

[@mecozir]

signals element process default change export before statement exit

[@CodingSumo]

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

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

origanal task file width drag push

[@magnuserikkeenrobot1117]

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

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

[@mecozir]

leaks tool entity does around

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

[@bouwensr]

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

[@AyoubRABIYAE]

❤❤❤

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

[@RishiRajxtrim]

👍💯

[@Randomguy48279xyz]

👍

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

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

[@kokojolo]

😘😘

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

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

[@adenugbamicheal2140]

Pls simplify real world project

[@fullstackprojects5615]

idea copied from monsterlessons