Slider Tabs Like YouTube Using Vanilla JavaScript | Scrollable Navbar

In different websites (including YouTube), you might have seen the scrollable slider tabs that filter videos according to the user’s interest. If you’re curious about how to create it with vanilla JavaScript then in this video you’ll learn how to create scrollable Slider Tabs Like YouTube from scratch.

Slider tabs can be a useful UI component for videos, images, and blog sites that needs to filter the content based on the users’ interests.

📢 SUBSCRIBE my channel for more helpful 🎬videos

▶ SLIDER PLAYLIST

⌚Timestamps
00:00 Intro
01:03 HTML
02:21 CSS (UI Design)
12:17 JavaScript (Horizontal Scroll)
20:29 JavaScript (Scroll To Center)
21:29 JavaScript (Slide On Click)
23:49 JavaScript (Vertical Scroll)
25:33 Outro

🌎 Browser : Brave V.1.50
📝 Code Editor : VS Code
💠 Extensions : Live-Server

#slider #tabs

[ruubenns]

Thank you for the excellent class, a lot of this solution and it came at a good time! Your presentation is sensational, congratulations!

[alancave]

Dude, you are a wizard! -- I love your stuff.

I have seen videos of how to create a Gantt chart with plain basic tables in Power BI or Excel by filling in cells with different colors, so I made a crappy looking version myself in HTML/CSS/JS. --- but I KNOW yours would look a thousand times better.

do you think you could be persuaded to make a video? -- just a thought

[pellejohansson]

Thanks for a good sample, but i am struggeling with one thing - lets say the background is white or dark - then it will not look god. any idea to solve this - then you really got a nice educational video that is really working.

[بدربنسعيد-طب]

When adding direction:rtl to support the Arabic language, the code does not work. Can you make it work?

[anelembanga]

Hi, this is cool. Can you please share the source code? Thank you so much.