jQuery Responsive Scrolling Bootstrap Tabs | Horizontal Scrolling

jQuery Responsive Scrolling Bootstrap Tabs

Step By Step Guide On How To Create Horizontal Scrolling Tabs In HTML, HTML5, Bootstrap version 5.

1. Add CSS file in head section – jquery.bs4-scrolling-tabs.min.css
2. Add jQuery Plugin after jQuery – jquery.bs4-scrolling-tabs.min.js
3. Add initialize JavaScript code at the bottom of page after – jquery.bs4-scrolling-tabs.min.js

HTML

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" style="display: none">
  <li class="nav-item"><a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">Tab Number 1</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab2" role="tab" data-toggle="tab">Tab Number 2</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab3" role="tab" data-toggle="tab">Tab Number 3</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content" style="display: none">
  <div role="tabpanel" class="tab-pane fade show active" id="tab1">Tab 1 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab2">Tab 2 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab3">Tab 3 content...</div>
</div>

CSS

<link rel="stylesheet" href="jquery.bs4-scrolling-tabs.min.css">   

JavaScript

<script> src="jquery.bs4-scrolling-tabs.min.js"></script>

<script>
;(function($) {
    'use strict';
    $(activate);
    function activate() {
    $('.nav-tabs').scrollingTabs({
        enableSwiping: true,
        scrollToTabEdge: true,
        disableScrollArrowsOnFullyScrolled: true
    })
    .on('ready.scrtabs', function() {
        $('.tab-content').show();
    });
    }
}(jQuery));
</script>   

How to create jQuery Scrolling Bootstrap Tabs

jQuery Plugin To Create horizontal html Scrolling Tabs with responsive using scrolling CSS, scrolling Js and plugins with support of bootstrap framework. Best elegant way to create HTML horizontal tabs to use <li> elements for tabs and menus. A nice example of scrolling tabs which supported by latest version of bootstrap 5. jQuery Horizontal Tab Menu with HTML CSS.

Using Left and Right Arrow Keys control the direction of horizontal tabs to scroll tabs and easily navigate between tabs.