Can I Create Netflix’s Video Carousel UI?

[@bradleybinho]

its like you read my mind mate! been fascinated by carousels like the ones on disney plus and netflix and I finally get to see the best web dev channel have to go! love it

[@Andressuquaz156]

32:32 that has to be the biggest flex i've ever seen in a tutorial

[@WebDevSimplified]

Lol. You would be surprised how many times I reference my own blog to remember how to do things.

[@AF911vids]

@@WebDevSimplified bro..the amount of knowledge you have is just amazing..i wish one day i could solve problems like you..

[@mannixmd]

You can use ::before and ::after on buttons you just forgot "" in the content property :)

[@rayyan-munassar]

Bro outsmart netflex with the button move. Well done that all I can say.

[@krishnachaitanya4067]

32:35 referring own blog and finding out the solution tells us to we need to maintain our notes, I do it and push it to git :)

[@wittyhumour29]

I Agree. Started maintaining notes too.

[@Mike-tb2hw]

These videos are 🔥!!! Keep it up Kyle! Love all the new tricks and troubleshooting tips watching your live videos. Especially debugging CSS

[@fcurcic]

You should re-do this for react, would be interesting to see how you'd structure the components

[@Rageypeep]

its really easy todo in React, im doing it at the moment, to chage the "--slider-index" you just "useState()" to chage it onClick of the handles, also using a "const numberOfImages = 9;" you can stop the over scroll just by using a bit of math, something like "setSliderIndex(prevIndex => Math.min(prevIndex + 1, numberOfImages - 4));" on the right click, that will always keep 4 images visable, its really simple to do. The whole page with HTML is about 45 lines of code. I'm also looking at using HTMX on the images as this will make them much more dynamic, also it will only load the images when called, so it makes the proformance really fast.

[@Randomness-rl8lv]

I hope one day Kyle comes back on the wrapping feature as implemented by Netflix. It is a sort of infinite scroll, hope you can make an awesome video about that ; ) Thanks for all your great content!

[@0VexRoblox]

For the infinite scroll is it practical to just clone the first four items in the container and append to the end, and when it's trying to move again remove the transition and set the current position variable to 0 and then add the transition back and then again set the current position variable to 1? Same logic for the left. Maybe cloning the children and appending them accordingly beforehand and just changing the left button and right button logic to what I mentioned would work?

[@Me-sz7yy]

I really love your videos, I strongly believe that this way of teaching make it easier for us to learn how to solve problems from beginning to end, the amount of information that they have is so valuable... thanks a lot 😀😀

[@MChiemelie]

Great work, man. Great work. I love your tutorials. I've watch many ready.

[@kinstar]

I was thinking about this last night and now your video pops up, you're spying on me 😱

[@sterix]

I'm going to have to try to implement this for my own site. Great video!

[@jasoncavanaugh1556]

More videos like this! That was great to watch!

[@perstry2397]

learning many tricks in 1 video , thank you sir for this content

[@shermanwong9866]

I have been looking for this for such a long time!

[@sh0ck238]

Thanks dude! Was looking for a guide on this everywhere, super cool!

[@raphaelmachado7197]

You are the best web dev youtuber

[@PachucoDesigns]

You are an extraordinary talent, man. I would kill to have this level of knowledge and competence.

[@herpaderppa3297]

Pretty simple, sit down your ass and learn

[@chuckcoughlin3112]

I love this format. It muchmore educational to watch ur thinking. Be a project and working thru it creates a longer video, but muc h better to comprehend.😄

[@MuhammadAhmedAshraf]

can you create paper ripple animation like youtube have when there's no internet there's a retry button and it flows from where the button got clicked and when you long press on it it goes slowly and when you double tap continously it doesn't have a delay it goes smooth like youtube have

[@johnadriandodge]

Excellent Jedi K! 🧠

[@medouadjihboudraa7706]

Nice video, for the html arrow on the left/right handle to be centered instead of using flex and text align and justify-content you can use padding-top : 5% padding-bottom : 5%

[@Skiid388]

What if there are 7 cards in the slider? There is 12 so it s good scenario but so you can click 4 times but what if there is 7 image cards?

[@VideoWow7184]

I've been watching a few of your videos and what I like the most is how you explain things, very clear and easy to understand. About the Netflicks slider, I believe it has a popout when you click on a video that overflows over content below the slider, I could be wrong but I recall seeing that somewhere. If it does have one then I'd be interested to know how that could be done. I've tried to do it in sliders I've built using flexbox where the overflow-x is set to auto so that the slider will scroll horizontally and the overflow-y set to visible so that popout will overflow vertically but the overflow-y automatically gets set to auto if overflow-x is also auto. The only way I was able to do it was to make the slider wider or by making the popout absolute and positioning it with some JS. Although these solutions work, they come with their own problems. For example, making the slider wider means that it takes up more space, whereas making the popout absolute prevents the slider underneath from scrolling because the events get captured by the popout.

[@rockNbrain]

Great content Kyle 👌

[@tesfatesfaye6262]

Bro I was literally thinking about this two days ago, shot how u read my mind!

[@gopalloharnew5948]

17:00 because you forgot to put the code in string !

[@gopalloharnew5948]

and from now I'll never forget it😃😃

[@nicholasdittmer4494]

These tutorials are amazing! Thank you very much

[@pseudocoffee4829]

I remember doing this in the first few weeks of webdev in university.

[@varangianventure]

Had a project where this tutorial was just perfect. Definately learned a few new tricks. .-)

[@alexanderboos8318]

Great work!

[@jonathanjensen9147]

You should give the DoorDash Slider component a shot - Its a responsive version of this that coordinates horizontal scroll with incremental clicks

[@surajitdas6555]

I wish I would have seen your this video before. Last month I implemented the same in an angular application it took around half a day for me

[@ritvarsfreimanis]

Ok, I'm definitely interested

[@sagun6268]

keep making thses videos loved it 🔥

[@darvil82]

Hmm I think the main problem of the pseudoelements for the arrows was that the character wasn't wrapped around quotes. And of course, great video as always!

[@awekeningbro1207]

no, wrapping it with quotes will render the string itself

[@hassaneoutouaya]

Thank you so much! I was just thinking about what if we hit the last item on the slider and we want to back to the first slider item: my idea is we have to: - Convert the slider items to an Array(slidesArray) - Shift (or splice from the index 0) the amount of slides depending on the given (--items-per-screen) from the slidesArray - Push the shiftedSlidesItems to the slidesArray. and vice versa when it comes to the left handle click, pop the last items(poppedItems) from slidesArray, then unshift the poppedItems to begin of the slidesArray again.

[@A.Dalton]

easier solution for me i already did , make the sliderindex=0 when i equal a specific number you decide

[@MisterGeekey]

Maybe you could've tried playing with the slider's children's orders to emulate the wrapping. Let me explain: 1st - There are two cases for this wrapping effect, one if the (# of items)/(# of items per screen) [let's call that groups] is < 5 and one if it is >= 5 In other words an active group (the 4 displayed thumbnails in your example) should be surrounded by at least 2 groups on each side. So for #groups < 5 you'll have to create copies. 2nd - Regardless of the copies created or not, each thumbnail should have an order, from 1 to 12 in your example. When the slider is shifted right, all the orders should be incremented by 1 except the last one that should get the value 1, or be moded mod12 (this way all the orders still range from 1 to 12). If the slider is shifted left then they should all be decremented by 1 and the first one gets the value 12, or gets moded mod12. This should accomplish the wrapping effect to some extent.

[@javascript_developer]

Its a nice approach to make slider. Again I was expecting to be able to scroll horizontal via magic mouse scrolling left and right. Normally with scrollbar its possible and also mobile friendly but hiding the scroll bar and making it horizontal scroll is chalangable. KZbin horizontal menu looks perfect to me which support vertical scroll and horizontal scroll from magic mouse touch pad in both cases it container scroll horizontally. Another example would be facebook shorts slider. Its great.

[@YuriiKratser]

Thanks for this great video!

[@TwoTeaTee]

The left/right arrow should have had flex direction as column to get it dead centre?

[@shehzadkhan1170]

Do we need to specifically set box sizing to the *::before and after element?? Cause when I set the box sizing for *, in the inspect mode in chrome, it showed that the before and after of * are set to the same.

[@benettsif4147]

WOW, just WOW. you did the looping of the carousel like it was nothing while i'm still scratching my head around it while i'm typing this comment. If i may ask a small request?Can you add an event that when the user presses one of the pics, that pic whould show on the center of the screen on a different div??

[@georgebradley4583]

You'll need a click event listener that will set the image to position absolute and the different div will need to be set to relative.

[@craig1253]

Big fan here! Hoping you redo this using react js

[@raipeter]

Is it just me who didn't know about the aspect-ratio property ? Damn

[@kinstar]

Yeah that's amazing

[@awekeningbro1207]

its not fully supported though

[@SydneyBrown-z5s]

There seems to be a problem when nesting flex boxes and defining flex-basis on child items. Browsers don't seem to allocate enough space in the parent flex container. At 42mins into the video Kyle is struggling with the progress bar items not fitting in the parent container and that's because there's an overflow. If he clicked on the flex button in dev tools then the overflow would have been obvious. In that case min-width is a workaround to make the child items fit inside the parent flex container. Also at 44mins Kyle changes the width of the progress bar items and he plays around with flex-basis which has no effect only min-width works. I'm wondering why nobody picked up on this issue and how many actually followed Kyle from the beginning to the end like I'm doing. Kyle has a tendency to talk fast and in some parts of the video he was modifying quite a few CSS rules without refreshing the browser. I've been following Kyle's tutorials for some time and have learnt a lot, however I do prefer watching Kevin Powell's videos because he takes his time and explains things thoroughly. He recently finished a video similar to this one but using HTML and CSS only. I hope Kyle takes my feedback as constructive.

[@privateinvestigationenterp4403]

Has anyone found out how to insert actual videos and it still work? I've tried, and it works until the slider buttons disappear after it populates over what it initially holds without sliding it.

[@me_manish_prajapati]

Kyle, I want to watch this type of vdo. But these are too lengthy for me. Can have some different way? Or only solution is to Speed up playback? Thanks for amazing vdos.

[@imluctor5997]

first thing i see is you making sure every image is scaled right but i think the movies are required to send them in the right resolution size or the img itself is being scaled and not inside the code

[@imane5971]

what do you do about the gap when you have an uneven number number of slides though?

[@anthonyzornig]

Top! Works seemlesly.

[@seeker3794]

As a newbie although having some understanding of js, I was completely confused with javascript code you provided.😅

[@curt8806]

It's not fair. You're beautiful and smart. None of us have a chance

[@yofi2614]

I don't get why do I need to give the slider >img max-width if I have already gave flex 0 0 25% and only by that I'm "telling" the each image to be max 25% of the .slider container

[@fvdham]

If you do flex with a width and no grow you might as well do inline-block?

[@MaxWeir]

Is it possible to use scroll snap for small screens then the left/right arrows for large?

[@VisualArtRonny]

I made something similar using scroll and moving nodes around, instead of translate. Works beautifully in desktop and android, but iOS devices touch events won't allow me to adjust the scrolling while touch is being processed... like if (slide.scrollLeft == 0) { slide.insertBefore(lastItem, firstItem); // The following is being ignored by iOs devices slide.scrollLeft = firstitem.width; } Any thoughts on the matter would be greatly appreciated.

[@pezcue937]

thank u. This is great

[@javascript_developer]

It doesn't seems to be working with iphone safari. I am guessing the issue is with that width not able to calculate.

[@airjason13]

This is aesome!

[@Rishikcharan]

Amazing 👏

[@2herzog]

i cant get the items to have the same height and the gap between them varies

[@anhmap9055]

No one is always smart, no one knows everything, there are times when they know what is wrong but try to ignore it to avoid finding a solution for it.

[@Michael-yp8zl]

being trying to recreate this with react and i am stuck on the logic for the active slider

[@techiebytes1]

Hi Bro thanks for the video, pretty awesome. But I got a problem maybe you can help me. When I try to implement a url in the images I lost the size configuration.

[@catalinim4227]

sliders are easy, just offset the container by width of cards

[@richardc4215]

can you explain the flex that you used for .slider > img? I dont understand how that works.

[@binarybulletin]

slider inside image🖼 i

[@chrisarmstrong2721]

is there a wordpress plugin that can do this?

[@idk6465]

What if you wanted to move in one at a time, infinitely?

[@abashasani7265]

I had this issue a while back it would have been a blessing if you had done this soone 😂😂

[@joaothomazini]

Every time I see people messing with CSS I praise the gods for tailwindcss

[@its_code]

I love 💕 this video 😍

[@arcanistzed]

Which keyboard shortcut do you use to move the current line up or down?

[@Asty__]

Ctrl + Alt + Up or Down Arrow, as far as I know

[@JJTrades_X]

You just had to put the chevron code in quotes! "\203a"

[@that1coolkid]

dude you should have used bootstraps carousel function

[@Uncaught_in_promise]

why not use swiper lib instead?

[@liftingforfun2347]

this guy is insane..

[@Tony.Nguyen137]

Can you try to recreate airbnb‘s scroll animation

[@aldeen9190]

this is programmer's version of netflix and chill

[@thesloth6733]

Please make it in Reactjs also.

[@mikaleo8776]

Bootstrap?

[@mrtinsen]

Coincidence? Kevin Powell 6 hours ago: kzbin.info/www/bejne/rKHbaaOHlsZ9aZo

[@GabrielMartinez-ez9ue]

Currently building a react component using this + tailwindcss. Anybody successfully made it?

[@MilanDrazic]

i created a similar but even worse design. I have The same sliders are one for the category that moves by one field, the other by seven fields and the third by three. And I did it to handle all one function recursively and function for bullets the other problem is bigger, because there is a diver for everyone on the left side, which must not be seen at the beginning and end of the container. so it’s especially that it’s all responsive, horror

[@skb875]

Love your videos and seeing how you solve problems. However, you say "essentially" so often, it's a little distracting haha.

[@Uncaught_in_promise]

Please recreate this in React

[@jowarnis]

getting rid off HTML and instead using only js to write it could easily solve infinite carousel problem.

[@7heMech]

Yes.

[@hugooliveirapinho9218]

INFINITE SCROLL? 5/10 rsrsrs, how to do it god!!!

[@reydez84]

you're insane lolol

[@Wade-vo6zx]

I think you can not only create Netflix's video carousel but that you can do even much much better. Need to start believing in yourself and your own creativity already

[@mirandatp3249]

😊😊😊

[@suelingsusu1339]

👏👏👏👏🙏🙏🙏🙏👌👌👌👌🖖🖖🖖🖖🖖🖖

[@cryzz0n]

Hmm I think the main problem of the pseudoelements for the arrows was that the character wasn't wrapped around quotes. And of course, great video as always!