Slider Tabs Like YouTube Using Vanilla JavaScript | Scrollable Navbar

Поделиться
HTML-код
  • Опубликовано: 2 июн 2024
  • In different websites (including RUclips), 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 RUclips 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
    🔔 / @codingdesign
    ▶ SLIDER PLAYLIST
    ✅ • Image Slider (Carousel)
    ⌚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

Комментарии • 24

  • @itachiuchiha1real
    @itachiuchiha1real Год назад

    Oh yeaah
    I love it
    Keep going bro ❤❤

  • @ocin3752
    @ocin3752 Год назад

    brilliant

    • @CodingDesign
      @CodingDesign  Год назад +1

      hope you'll show your same l❤ve & support in the future too.

  • @Error_fragproshooter
    @Error_fragproshooter Год назад +2

    Great video 😊❤

  • @ruubenns
    @ruubenns 8 месяцев назад

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

  • @hadifirouzi7202
    @hadifirouzi7202 4 месяца назад

    It was great and presentation was excellent 👏👏

  • @alancave4117
    @alancave4117 Год назад

    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

    • @CodingDesign
      @CodingDesign  Год назад

      I think Within a month I'm gonna create separate video. But right now I'm busy in creating other contents.

  • @pellejohansson786
    @pellejohansson786 8 месяцев назад

    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.

    • @CodingDesign
      @CodingDesign  6 месяцев назад

      You can use CSS variables for that. Actually I've created separate video on same topic. You can check out my another helpful video.
      ✅ ruclips.net/video/H89vG59kIvk/видео.html

  • @Aziz-Ahmed-UK
    @Aziz-Ahmed-UK 8 месяцев назад

    Any idea how this can be integrated into a WordPress website using elementor page builder?

    • @CodingDesign
      @CodingDesign  6 месяцев назад

      I'm sorry😭 I've no any idea.

  • @anelembanga6061
    @anelembanga6061 6 месяцев назад

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

    • @CodingDesign
      @CodingDesign  6 месяцев назад

      I'm sorry right now it's unavailable.

  • @balex259
    @balex259 11 месяцев назад

    Source code?

    • @CodingDesign
      @CodingDesign  11 месяцев назад

      Right now, It's not available. Sorry😭.

    • @Aziz-Ahmed-UK
      @Aziz-Ahmed-UK 8 месяцев назад +1

      What is the point if there is no source code? that means you only want to grab subscribers and likes BS@@CodingDesign

  • @ashwinsalunke9929
    @ashwinsalunke9929 5 месяцев назад

    no code no use

    • @CodingDesign
      @CodingDesign  5 месяцев назад

      It's useful when you invest your time.