Can I Create Netflix’s Video Carousel UI?
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- Netflix has some incredible UI, but at the core of all its UI features is the video carousel. This is a simple looking piece of UI, but it is incredibly complex. In this video I attempt to recreate this UI component live for the first time.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/n...
🌎 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
00:55 - Planning
02:10 - Slider HTML
03:53 - Slider CSS
10:06 - Slider Left/Right Buttons
33:53 - Slider Progress Indicator
52:31 - Slider Wrapping
#NetflixCSS #WDS #LiveCoding
![[Full Episode] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 5](http://i.ytimg.com/vi/g5wpgeAIzMs/mqdefault.jpg)
These videos are 🔥!!! Keep it up Kyle! Love all the new tricks and troubleshooting tips watching your live videos. Especially debugging CSS
You can use ::before and ::after on buttons you just forgot "" in the content property :)
32:32 that has to be the biggest flex i've ever seen in a tutorial
Lol. You would be surprised how many times I reference my own blog to remember how to do things.
@@WebDevSimplified bro..the amount of knowledge you have is just amazing..i wish one day i could solve problems like you..
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 😀😀
Thanks dude! Was looking for a guide on this everywhere, super cool!
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
Great work, man. Great work. I love your tutorials. I've watch many ready.
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 :)
I Agree. Started maintaining notes too.
More videos like this! That was great to watch!
I'm going to have to try to implement this for my own site. Great video!
I have been looking for this for such a long time!
Bro outsmart netflex with the button move. Well done that all I can say.
learning many tricks in 1 video , thank you sir for this content
These tutorials are amazing! Thank you very much
You should re-do this for react, would be interesting to see how you'd structure the components
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.
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?
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%
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.😄
Great content Kyle 👌
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!
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.
Ok, I'm definitely interested
keep making thses videos loved it 🔥
Thanks for this great video!
Great work!
I was thinking about this last night and now your video pops up, you're spying on me 😱
Had a project where this tutorial was just perfect. Definately learned a few new tricks. .-)
Bro I was literally thinking about this two days ago, shot how u read my mind!
thank u. This is great
You are an extraordinary talent, man. I would kill to have this level of knowledge and competence.
Pretty simple, sit down your ass and learn
You are the best web dev youtuber
I remember doing this in the first few weeks of webdev in university.
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.
TH-cam 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.
Top! Works seemlesly.
Excellent Jedi K!
🧠
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
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!
Amazing 👏
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
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.
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.
I love 💕 this video 😍
This is aesome!
The left/right arrow should have had flex direction as column to get it dead centre?
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.
easier solution for me i already did , make the sliderindex=0 when i equal a specific number you decide
I had this issue a while back it would have been a blessing if you had done this soone 😂😂
Big fan here! Hoping you redo this using react js
Is it possible to use scroll snap for small screens then the left/right arrows for large?
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??
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.
If you do flex with a width and no grow you might as well do inline-block?
You should give the DoorDash Slider component a shot - Its a responsive version of this that coordinates horizontal scroll with incremental clicks
As a newbie although having some understanding of js, I was completely confused with javascript code you provided.😅
sliders are easy, just offset the container by width of cards
Can you try to recreate airbnb‘s scroll animation
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
this guy is insane..
It's not fair. You're beautiful and smart. None of us have a chance
17:00 because you forgot to put the code in string !
and from now I'll never forget it😃😃
what snippets use you in this video tutorial for these 9 images tags? thank you for sharing.
@@waternlava yes I found it. thank you for share !
what do you do about the gap when you have an uneven number number of slides though?
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.
Is it just me who didn't know about the aspect-ratio property ? Damn
Yeah that's amazing
its not fully supported though
It doesn't seems to be working with iphone safari. I am guessing the issue is with that width not able to calculate.
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.
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.
Please make it in Reactjs also.
dude you should have used bootstraps carousel function
can you explain the flex that you used for .slider > img? I dont understand how that works.
slider inside image🖼 i
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.
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.
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.
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
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?
being trying to recreate this with react
and i am stuck on the logic for the active slider
Every time I see people messing with CSS I praise the gods for tailwindcss
You just had to put the chevron code in quotes! "\203a"
Yes.
is there a wordpress plugin that can do this?
this is programmer's version of netflix and chill
i cant get the items to have the same height and the gap between them varies
Which keyboard shortcut do you use to move the current line up or down?
Ctrl + Alt + Up or Down Arrow, as far as I know
What if you wanted to move in one at a time, infinitely?
Currently building a react component using this + tailwindcss. Anybody successfully made it?
why not use swiper lib instead?
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
Please recreate this in React
Bootstrap?
Coincidence? Kevin Powell 6 hours ago: th-cam.com/video/vpx8pQaaJ38/w-d-xo.html
Love your videos and seeing how you solve problems. However, you say "essentially" so often, it's a little distracting haha.
INFINITE SCROLL? 5/10 rsrsrs, how to do it god!!!
😊😊😊
getting rid off HTML and instead using only js to write it could easily solve infinite carousel problem.
you're insane lolol
👏👏👏👏🙏🙏🙏🙏👌👌👌👌🖖🖖🖖🖖🖖🖖
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
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!
no, wrapping it with quotes will render the string itself