1. Tutorials
  2. JavaScript Tutorial
  3. How to Build a Draggable Tabs Slider with HTML, CSS, and JavaScript?

How to Build a Draggable Tabs Slider with HTML, CSS, and JavaScript?

Submitted by oretnom23 on Tuesday, December 17, 2024 - 13:47.

In this tutorial, we will explore how to create a Draggable Tabs Slider using HTML, CSS, and JavaScript. This feature has become increasingly popular in modern web applications due to its versatility and user-friendly functionality.

The main goal of this tutorial is to provide you with ideas and techniques for building a useful and effective feature that can enhance the user experience in your future web development projects. A Draggable Tabs Slider, as discussed in this tutorial, is a horizontally scrollable container that displays a list of items. Users can easily navigate through the content by dragging left or right, offering an intuitive and interactive browsing experience.

This feature is particularly useful for applications such as product carousels, horizontal menus, or showcasing multiple items in a compact space. By the end of this tutorial, you’ll have a solid understanding of how to implement and customize this functionality for your projects.

Let’s dive into creating a draggable tabs slider and take your web application design to the next level!

Step 1: Creating the User Interface

To get started, let’s create the foundational HTML file for our application with the draggable tabs slider. This file will contain all the key elements necessary to structure the slider and define the content that will be displayed within it.

Begin by creating a new HTML file and save it as index.html. Naming the file index.html. Check the following HTML code that I created.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Draggable Tabs Slider using HTML, CSS and JavaScript</title>
  8.     <link rel="stylesheet" href="style.css">
  9.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
  10. </head>
  11.  
  13.     <div id="main-wrapper">
  14.         <h1 id="page-title"><strong>Draggable Tabs Slider using HTML, CSS, and JavaScript</strong></h1>
  15.  
  16.         <div id="slider-tab">
  17.             <button id="slider-tab-left-btn" class="slider-tab-nav-btn" aria-label="Slide Left">
  18.                 <span class="material-symbols-outlined">chevron_left</span>
  19.             </button>
  20.             <ul id="slider-list">
  21.                 <li class="slider-item">HTML</li>
  22.                 <li class="slider-item">CSS</li>
  23.                 <li class="slider-item active">JavaScript</li>
  24.                 <li class="slider-item">PHP</li>
  25.                 <li class="slider-item">C</li>
  26.                 <li class="slider-item">C++</li>
  27.                 <li class="slider-item">C#</li>
  28.                 <li class="slider-item">VB</li>
  29.                 <li class="slider-item">VB.net</li>
  30.                 <li class="slider-item">Python</li>
  31.                 <li class="slider-item">Node.JS</li>
  32.                 <li class="slider-item">ReactJS</li>
  33.                 <li class="slider-item">ASP.NET</li>
  34.                 <li class="slider-item">TypeScript</li>
  35.                 <li class="slider-item">Ruby</li>
  36.                 <li class="slider-item">Dart</li>
  37.                 <li class="slider-item">Go</li>
  38.                 <li class="slider-item">Kotlin</li>
  39.                 <li class="slider-item">Swift</li>
  40.                 <li class="slider-item">Java</li>
  41.                 <li class="slider-item">Perl</li>
  42.             </ul>
  43.             <button id="slider-tab-right-btn" class="slider-tab-nav-btn" aria-label="Slide Right">
  44.                 <span class="material-symbols-outlined">chevron_right</span>
  45.             </button>
  46.         </div>
  47.     </div>
  48.     <script src="script.js"></script>
  49. </body>
  50.  
  51. </html>

This HTML file will act as the backbone of our project, where we define the slider container, tab items, and any additional elements required for the functionality. In the next steps, we’ll enhance it further by styling the layout with CSS and adding interactivity with JavaScript.

Step 2: Styling the Interface

Next, let’s create the Cascading Stylesheet (CSS) file to define the design and styling of our application's interface. This file will help bring the visual elements of the draggable tabs slider to life by adding colors, fonts, and layout styles.

Create a new CSS file and save it as style.css. This file also contain the CSS code responsible for styling the tabs, ensuring they are displayed horizontally and have a polished and user-friendly appearance.

The style.css file is essential for customizing the interface, enhancing user engagement, and making the application visually appealing. With well-organized CSS, you can achieve a consistent and professional design for your web application. Below, you’ll find sample CSS rules to start designing the tabs and other components.

  1. @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  2.  
  3. *{
  4.     font-family: "Ubuntu Mono", serif;
  5.     font-weight: 400;
  6.     font-style: normal;
  7. }
  8.  
  9. strong, b {
  10.     font-weight: 700;
  11. }
  12.  
  13. html, body{
  14.     height: 100%;
  15.     max-height: 100%;
  16.     width: 100%;
  17.     max-width: 100%;
  18.     overflow: auto;
  19.     padding: unset;
  20.     margin: unset;
  21.     box-sizing: border-box;
  22. }
  23.  
  24. body{
  25.     display: flex;
  26.     flex-flow:column;
  27.     justify-content: center;
  28.     align-items: center;
  29.     background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
  30. }
  31.  
  32. #main-wrapper{
  33.     width: 100%;
  34.     max-width: 700px;
  35. }
  36. #page-title{
  37.     text-align: center;
  38.     color: #fff;
  39.     text-shadow: 0px 3px 5px #2c2c2c;
  40.     margin-bottom: 30px;
  41. }
  42.  
  43. /* Slider Tab Container */
  44. #slider-tab{
  45.     width: 100%;
  46.     max-width: 400px;
  47.     margin: auto;
  48.     background-color: #fff;
  49.     box-shadow: 0px 3px 5px #3e3e3e;
  50.     border-radius: 50px;
  51.     padding: 0 15px;
  52.     position: relative;
  53.     display: flex;
  54.     justify-content: space-between;
  55.     overflow: hidden;
  56. }
  57.  
  58. /* Scroll or Slide Buttons */
  59. button.slider-tab-nav-btn {
  60.     position: absolute;
  61.     top: 0;
  62.     height: 100%;
  63.     width: 50px;
  64.     border: unset;
  65.     cursor: pointer;
  66.     user-select: none;
  67. }
  68. /* Left Scroll or Slide Button */
  69. button#slider-tab-left-btn {
  70.     left: 0;
  71.     background: linear-gradient(90deg, #ffffff 50%, transparent);
  72.     text-align: start;
  73.     transition: all .2s ease-in-out;
  74.     padding-left: 10px;
  75. }
  76. button#slider-tab-left-btn:hover {
  77.     background: linear-gradient(90deg, #e5e5e5 50%, transparent);
  78. }
  79. /* Right Scroll or Slide Button */
  80. button#slider-tab-right-btn {
  81.     right: 0;
  82.     background: linear-gradient(270deg, #ffffff 50%, transparent);
  83.     text-align: end;
  84.     padding-right: 10px;
  85. }
  86. button#slider-tab-right-btn:hover {
  87.     background: linear-gradient(270deg, #e5e5e5 50%, transparent);
  88. }
  89. /* Slider Tab List Container */
  90. ul#slider-list{
  91.     display: flex;
  92.     flex-grow: 1;
  93.     flex-wrap: nowrap;
  94.     overflow: hidden;
  95.     padding: 10px 28px;
  96.     margin: unset;
  97.     cursor: e-resize;
  98.     scroll-behavior: smooth;
  99. }
  100.  
  101. /* Slider Tab List Items */
  102. ul#slider-list > li.slider-item{
  103.     list-style: none;
  104.     margin: 3px 10px;
  105.     padding: 5px 15px;
  106.     border-radius: 10px;
  107.     color: #4a4a4a;
  108.     background-color: #efefef;
  109.     border-color: #f3f3f37a;
  110.     box-shadow: 2px 3px 3px #cacaca7a;
  111.     cursor: pointer;
  112.     user-select: none;
  113. }
  114. /* Slider Tab List Items when hovered*/
  115. ul#slider-list > li.slider-item:hover{
  116.     color: #f4f3f3 !important;
  117.     background-color: #639cff !important;
  118.     border-color: #639cff !important;
  119.     box-shadow: 1px 2px 3px #00000045 !important;
  120. }
  121.  
  122. /* Slider Tab List Items is active*/
  123. li.slider-item.active {
  124.     color: #f4f3f3 !important;
  125.     background-color: #1a6af5 !important;
  126.     border-color: #1a6af5 !important;
  127.     box-shadow: 1px 2px 3px #0000009e !important;
  128. }

Step 3: Creating the Main Functions

Lastly, let’s create the JavaScript file that will enable the functionality of our Draggable Tabs Slider. This file will contain the event handlers and logic required to make the tabs slider interactive and fully functional.

Create a new JavaScript file and name it script.js. This file will handle the essential events such as left and right scroll button interactions, click events for changing the active tab, and drag-to-scroll functionality for navigating through the tabs.

The script.js file is the backbone of the application’s interactivity, ensuring smooth and responsive user experience. Below, you’ll find the JavaScript code that demonstrates how to implement these key features and achieve the main functions of the draggable tabs slider.

  1. // Slider Container
  2. const sliderTab = document.querySelector("#slider-tab")
  3. // Slider List
  4. const sliderList = sliderTab.querySelector("#slider-list")
  5. // Slider Buttons
  6. const slideLeftBtn = sliderTab.querySelector("#slider-tab-left-btn")
  7. const slideRightBtn = sliderTab.querySelector("#slider-tab-right-btn")
  8.  
  9. // Change Active Tab Item when Clicked
  10. sliderList.querySelectorAll(".slider-item").forEach(function(el){
  11.     el.addEventListener("click", function(e){
  12.         e.preventDefault();
  13.         sliderList.querySelector(".slider-item.active").classList.remove("active");
  14.         el.classList.add("active")
  15.     })
  16. })
  17.  
  18. // Left Slide Button Event Listener
  19. slideLeftBtn.addEventListener("click", function(e){
  20.     e.preventDefault();
  21.     // Current Scroll
  22.     var currentSliderOffset = sliderList.scrollLeft;
  23.     // Decrease offset 100px to scroll left
  24.     var newSlideOffset = currentSliderOffset - 100;
  25.     // If new scroll offset is less than to scrollwidth, use set 0 as the new offset
  26.     if(newSlideOffset < 0)
  27.         newSlideOffset = 0;
  28.  
  29.     // Update Scroll Offset
  30.     sliderList.scrollLeft = newSlideOffset;
  31. })
  32.  
  33. // Right Slide Button Event Listener
  34. slideRightBtn.addEventListener("click", function(e){
  35.     e.preventDefault();
  36.     // Scroll Width
  37.     var sliderWidth = sliderList.scrollWidth;
  38.     // Current Scroll
  39.     var currentSliderOffset = sliderList.scrollLeft;
  40.     // Add 100px to scroll right
  41.     var newSlideOffset = currentSliderOffset + 100;
  42.     // If new scroll offset is greater than to scrollwidth, use scroll width
  43.     if(newSlideOffset > sliderWidth)
  44.         newSlideOffset = sliderWidth;
  45.  
  46.     // Update Scroll Offset
  47.     sliderList.scrollLeft = newSlideOffset;
  48. })
  49.  
  50. /**
  51. * Dragging / Sliding Tabs Events
  52. */
  53. var dragSlider = false;
  54. var dragStartX = 0;
  55. var dragEndX = 0;
  56.  
  57. // mouse down event
  58. sliderList.addEventListener("mousedown", function(e){
  59.     e.preventDefault;
  60.     // Identifier to start drag event
  61.     dragSlider = true;
  62.     // Starting Point of dragging
  63.     dragStartX = e.clientX;
  64. })
  65.  
  66. // mouse move event
  67. window.addEventListener("mousemove", function(e){
  68.     e.preventDefault;
  69.     // Check if drag has started
  70.     if(!dragSlider)
  71.         return;
  72.     // X axis point where current drag located
  73.     dragEndX = e.clientX;
  74.  
  75.     // Compute the difference between the starting and ending X axis Point
  76.     var dragDiff = dragEndX - dragStartX;
  77.  
  78.     // Update scroll offset
  79.     sliderList.scrollLeft = sliderList.scrollLeft - dragDiff;
  80. })
  81.  
  82. // mouse up event
  83. window.addEventListener("mouseup", function(e){
  84.     // Check if drag has started
  85.     if(!dragSlider)
  86.         return;
  87.  
  88.     // Reset Dragging Events Variables
  89.     dragSlider = false;
  90.     dragStartX = 0;
  91.     dragEndX = 0;
  92. })

How to Build a Draggable Tabs Slider with HTML, CSS, and JavaScript?

The image above is a screenshot showcasing the result of the script provided in this tutorial. It shows how the application comes together using the HTML, CSS, and JavaScript code we've implemented.

I have also provided the complete source code available for download in a zip file. You can access the source code by clicking the download button located below this article. Feel free to download, modify, and customize the code according to your needs for your own web development projects.

This resource is designed to help you better understand the implementation process, and you can adapt the code to create similar features or experiment with different functionality for your future applications.

There you have it! You can now test the application with the Draggable Tabs Slider on your end and see if it works as we expected. I hope this tutorial will help you and give you some ideas and techniques for developing your own web application features.

Explore more on this website for more Tutorial, Free Source Codes, and Articles covering various programming languages.

Happy Coding

Tags
html/css
Javascript
JS tutorial
Tutorial for Beginners
Slider Tutorial

Comments

Submitted by Bueala (not verified) on Wed, 12/18/2024 - 23:45

You are so beautiful

Add new comment

About text formats