{"id":39763886,"url":"https://github.com/mikejacobson/bootstrap4-scrolling-tabs","last_synced_at":"2026-01-18T11:43:23.094Z","repository":{"id":53602786,"uuid":"231292235","full_name":"mikejacobson/bootstrap4-scrolling-tabs","owner":"mikejacobson","description":"jQuery plugin for making Bootstrap 4 Tabs scroll horizontally without a scrollbar","archived":false,"fork":false,"pushed_at":"2021-05-31T03:28:26.000Z","size":362,"stargazers_count":5,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-02-26T10:36:26.180Z","etag":null,"topics":["bootstrap-4","bootstrap-tabs","bootstrap4","javascript","jquery-plugin","scrolling-tabs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mikejacobson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-02T02:22:23.000Z","updated_at":"2022-02-07T13:13:36.000Z","dependencies_parsed_at":"2022-09-15T03:11:28.683Z","dependency_job_id":null,"html_url":"https://github.com/mikejacobson/bootstrap4-scrolling-tabs","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/mikejacobson/bootstrap4-scrolling-tabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikejacobson%2Fbootstrap4-scrolling-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikejacobson%2Fbootstrap4-scrolling-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikejacobson%2Fbootstrap4-scrolling-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikejacobson%2Fbootstrap4-scrolling-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikejacobson","download_url":"https://codeload.github.com/mikejacobson/bootstrap4-scrolling-tabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikejacobson%2Fbootstrap4-scrolling-tabs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28535177,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T10:13:46.436Z","status":"ssl_error","status_checked_at":"2026-01-18T10:13:11.045Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap-4","bootstrap-tabs","bootstrap4","javascript","jquery-plugin","scrolling-tabs"],"created_at":"2026-01-18T11:43:20.153Z","updated_at":"2026-01-18T11:43:23.069Z","avatar_url":"https://github.com/mikejacobson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"bootstrap4-scrolling-tabs\n================================\n\njQuery plugin for making Bootstrap 4 Tabs scroll horizontally rather than wrap.\n\nIt's dependent on Bootstrap 4 and jQuery 3.\n\nIt uses [CSS3 2D Transforms](https://caniuse.com/#feat=transforms2d) for the scroll movement, so be sure to check your browser compatibility.\n\n\u0026nbsp;\n\n\u003e Disclaimer: This is a port of my original Bootstrap 3 plugin, [jquery-bootstrap-scrolling-tabs](https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs), modified to work with Bootstrap 4. I wrote that original plugin many years ago when I needed to support IE8, so it was not written with modern JavaScript features. Because I didn't think a complete rewrite would be worthwhile, I kept most of the original code, just updating it to handle the slightly different Bootstrap 4 element structure and replacing the jQuery animations with CSS Transforms. So please don't judge me too harshly for the somewhat outdated JavaScript code and coding style\u0026mdash;it's painful for me to look at, too.\n\n\u0026nbsp;\n\nHere's what they look like:\n\n![](https://raw.githubusercontent.com/mikejacobson/bootstrap4-scrolling-tabs/master/bootstrap-4-scrolling-tabs-screenshot.png)\n\n\nAnd here are CodePens showing them working with:\n\n* \u003ca href=\"https://codepen.io/mikejacobson/pen/xxgKKNX\" target=\"_blank\"\u003eHTML-defined Tabs\u003c/a\u003e\n* \u003ca href=\"https://codepen.io/mikejacobson/pen/JjEPjMB\" target=\"_blank\"\u003eData-driven Tabs\u003c/a\u003e\n\nOr if you prefer StackBlitz:\n\n* \u003ca href=\"https://stackblitz.com/edit/bootstrap4-scrolling-tabs-demo-html-driven?file=index.html\" target=\"_blank\"\u003eHTML-defined Tabs\u003c/a\u003e\n* \u003ca href=\"https://stackblitz.com/edit/bootstrap4-scrolling-tabs-demo-data-driven-tabs?file=index.html\" target=\"_blank\"\u003eData-driven Tabs\u003c/a\u003e\n\n\u0026nbsp;\n\nUse Cases\n---------\n* [Use Case #1: Wrap HTML-defined Tabs](#uc1)\n* [Use Case #2: Create Data-driven Tabs](#uc2)\n\n\u0026nbsp;\n\nOptional Features\n-----------------\nThere are also optional features available:\n* [Reverse Scroll](#reverse-scroll)\n* [Force Scroll to Tab Edge](#force-scroll-to-tab-edge)\n* [Disable Scroll Arrows on Fully Scrolled](#disable-scroll-arrows-on-fully-scrolled)\n* [Enable Horizontal Swiping for Touch Screens](#enable-horizontal-swiping-for-touch-screens)\n* [Enable Right-to-Left Language Support](#enable-right-to-left-language-support)\n* [Width Multiplier](#width-multiplier)\n* [Handle Delayed Scrollbar](#handle-delayed-scrollbar)\n* [Tab Click Handler](#tab-click-handler)\n* [Custom Scroll Arrow classes](#custom-scroll-arrow-classes)\n* [Custom Scroll Arrow content](#custom-scroll-arrow-content)\n* [Custom Tab LI content](#custom-tab-li-content-data-driven-tabs-only)\n* [Tab LI and Anchor Post-Processors](#tab-li-and-anchor-post-processors-data-driven-tabs-only)\n\n\u0026nbsp;\n\nTips \u0026 Tricks\n-------------\n* [Preventing Flash of Unwrapped Tabs](#preventing-flash-of-unwrapped-tabs)\n* [Forcing a Refresh](#forcing-a-refresh)\n* [Forcing a Scroll to the Active Tab](#forcing-a-scroll-to-the-active-tab)\n* [Custom SCSS](#custom-scss)\n\n\u0026nbsp;\n\n## [Setting Defaults](#setting-defaults-1)\n\n## [Events](#events-1)\n\n## [Destroying the Plugin](#destroying-the-plugin-1)\n\n\u0026nbsp;\n\n\nOverview\n--------\nIf you're using [Bootstrap 4 Tabs](https://getbootstrap.com/docs/4.4/components/navs/#tabs) (`nav-tabs`) and you don't want them to wrap if the page is too narrow to accommodate them all in one row, you can use this plugin to keep them in a row that scrolls horizontally without a scrollbar.\n\nIt adjusts itself on window resize (debounced to prevent resize event wackiness), so if the window is widened enough to accommodate all tabs, scrolling will deactivate and the scroll arrows will disappear. (And, of course, vice versa if the window is narrowed.)\n\n\u0026nbsp;\n\n## Use Cases\n\n### \u003ca id=\"uc1\"\u003e\u003c/a\u003eUse Case #1: HTML-defined Tabs\n\nIf your `nav-tabs` markup looks like this:\n```html\n\u003c!-- Nav tabs --\u003e\n\u003cul class=\"nav nav-tabs\" role=\"tablist\"\u003e\n  \u003cli class=\"nav-item\"\u003e\u003ca class=\"nav-link active\" href=\"#tab1\" role=\"tab\" data-toggle=\"tab\"\u003eTab Number 1\u003c/a\u003e\u003c/li\u003e\n  \u003cli class=\"nav-item\"\u003e\u003ca class=\"nav-link\" href=\"#tab2\" role=\"tab\" data-toggle=\"tab\"\u003eTab Number 2\u003c/a\u003e\u003c/li\u003e\n  \u003cli class=\"nav-item\"\u003e\u003ca class=\"nav-link\" href=\"#tab3\" role=\"tab\" data-toggle=\"tab\"\u003eTab Number 3\u003c/a\u003e\u003c/li\u003e\n  \u003cli class=\"nav-item\"\u003e\u003ca class=\"nav-link\" href=\"#tab4\" role=\"tab\" data-toggle=\"tab\"\u003eTab Number 4\u003c/a\u003e\u003c/li\u003e\n  \u003cli class=\"nav-item\"\u003e\u003ca class=\"nav-link\" href=\"#tab5\" role=\"tab\" data-toggle=\"tab\"\u003eTab Number 5\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003c!-- Tab panes --\u003e\n\u003cdiv class=\"tab-content\"\u003e\n  \u003cdiv role=\"tabpanel\" class=\"tab-pane fade show active\" id=\"tab1\"\u003eTab 1 content...\u003c/div\u003e\n  \u003cdiv role=\"tabpanel\" class=\"tab-pane fade show\" id=\"tab2\"\u003eTab 2 content...\u003c/div\u003e\n  \u003cdiv role=\"tabpanel\" class=\"tab-pane fade show\" id=\"tab3\"\u003eTab 3 content...\u003c/div\u003e\n  \u003cdiv role=\"tabpanel\" class=\"tab-pane fade show\" id=\"tab3\"\u003eTab 4 content...\u003c/div\u003e\n  \u003cdiv role=\"tabpanel\" class=\"tab-pane fade show\" id=\"tab3\"\u003eTab 5 content...\u003c/div\u003e\n\u003c/div\u003e\n```\n\nyou can wrap the tabs in the scroller like this:\n```javascript\n$('.nav-tabs').scrollingTabs();\n```\n\n\u0026nbsp;\n### \u003ca id=\"uc2\"\u003e\u003c/a\u003eUse Case #2: Data-driven Tabs\n\nIf your tabs are data-driven rather than defined in your markup, you just need to pass your tabs array to the plugin and it will generate the tab elements for you.\n\nSo your tabs data should look something like this (note that the tab titles can contain HTML):\n```javascript\nvar myTabs = [\n  { paneId: 'tab01', title: 'Tab \u003cem\u003e1\u003c/em\u003e of 12', content: 'Tab Number 1 Content', active: true, disabled: false },\n  { paneId: 'tab02', title: 'Tab 2 of 12', content: 'Tab Number 2 Content', active: false, disabled: false },\n  { paneId: 'tab03', title: 'Tab 3 of 12', content: 'Tab Number 3 Content', active: false, disabled: false },\n  { paneId: 'tab04', title: 'Tab 4 of 12', content: 'Tab Number 4 Content', active: false, disabled: false },\n  { paneId: 'tab05', title: 'Tab 5 of 12', content: 'Tab Number 5 Content', active: false, disabled: false }\n];\n```\n\nYou would then need a target element to append the tabs and panes to, like this:\n\n```html\n\u003c!-- build .nav-tabs and .tab-content in here --\u003e\n\u003cdiv id=\"tabs-inside-here\"\u003e\u003c/div\u003e\n```\n\n\nThen just call the plugin on that element, passing a settings object with a `tabs` property pointing to your tabs array:\n\n```javascript\n$('#tabs-inside-here').scrollingTabs({\n  tabs: myTabs\n});\n```\n\u0026nbsp;\n#### **Required Tab Data Properties**\n\nEach tab object in the array must have a property for\n* the tab title (text or HTML)\n* the ID of its target pane (text)\n* its active state (bool)\n\nOptionally, it can also have a boolean for its `disabled` state.\n\n\u0026nbsp;\n#### **'Content' Property for Tab Panes**\n\nIf you want the plugin to generate the tab panes also, include a `content` property on the tab objects.\n\nIf your tab objects have a `content` property but you *don't* want the plugin to generate the panes, pass in plugin option `ignoreTabPanes: true` when calling the plugin.\n\n```javascript\n$('#tabs-inside-here').scrollingTabs({\n  tabs: myTabs,\n  ignoreTabPanes: true\n});\n```\n\u0026nbsp;\n#### **Custom Tab Data Property Names**\n\nBy default, the plugin assumes those properties will be named `title`, `paneId`, `active`, `disabled`, and `content`, but if you want to use different property names, you can pass your property names in as properties on the settings object:\n\n```javascript\n$('#tabs-inside-here').scrollingTabs({\n  tabs: myTabs, // required,\n  propTitle: 'myTitle', // required if not 'title'\n  propPaneId: 'myPaneId', // required if not 'paneId'\n  propActive: 'myActive', // required if not 'active'\n  propDisabled: 'myDisabled', // required if not 'disabled'\n  propContent: 'myContent' // required if not 'content'\n});\n```\n\nSo, for example, if your tab objects used the property name `label` for their titles instead of `title`, you would need to pass property `propTitle: 'label'` in your settings object.\n\n```javascript\n$('#tabs-inside-here').scrollingTabs({\n  tabs: myTabs,\n  propTitle: 'label'\n});\n```\n\u0026nbsp;\n#### **Refreshing after Tab Data Change**\n\nOn `tabs` data change, just call the plugin's `refresh` method to refresh the tabs on the page:\n```javascript\n$('#tabs-inside-here').scrollingTabs('refresh');\n```\n\n\u0026nbsp;\n#### **forceActiveTab Option**\n\nOn `tabs` data change, if you want the active tab to be set based on the updated tabs data (i.e., you want to override the current active tab setting selected by the user), for example, if you added a new tab and you want it to be the active tab, pass the `forceActiveTab` flag on refresh:\n```javascript\n$('#tabs-inside-here').scrollingTabs('refresh', {\n  forceActiveTab: true\n});\n```\n\n\n\u0026nbsp; \n### Options\n\n#### **\u003ca id=\"reverseScroll\"\u003e\u003c/a\u003eReverse Scroll**\n\nBy default, if there are tabs hidden off the right side of the page, you would click the right scroll arrow to slide those tabs into view (and vice versa for the left scroll arrow, of course, if there are tabs hidden off the left side of the page).\n\nYou can reverse the direction the tabs slide when an arrow is clicked by passing in option `reverseScroll: true`:\n\n```javascript\n$('.nav-tabs').scrollingTabs({\n  reverseScroll: true  \n});\n```\n\nThis might be the more intuitive behavior for mobile devices.\n\n\u0026nbsp;\n#### **\u003ca id=\"scrollToTabEdge\"\u003e\u003c/a\u003eForce Scroll to Tab Edge**\n\nIf you want to ensure the scrolling always ends with a tab edge aligned with the left scroll arrow so there won't be a partially hidden tab, pass in option `scrollToTabEdge: true`:\n\n```javascript\n$('.nav-tabs').scrollingTabs({\n  scrollToTabEdge: true  \n});\n```\n\nThere's no way to guarantee the left *and* right edges will be full tabs because that's dependent on the the width of the tabs and the window. So this just makes sure the left side will be a full tab.\n\n\u0026nbsp;\n#### **\u003ca id=\"disableScrollArrowsOnFullyScrolled\"\u003e\u003c/a\u003eDisable Scroll Arrows on Fully Scrolled**\n\nIf you want the left scroll arrow to disable when the tabs are scrolled fully left (the way they would be on page load, for example), and the right scroll arrow to disable when the tabs are scrolled fully right, pass in option `disableScrollArrowsOnFullyScrolled: true`:\n\n```javascript\n$('.nav-tabs').scrollingTabs({\n  disableScrollArrowsOnFullyScrolled: true  \n});\n```\n\nNote that if you have the `reverseScroll` option set to `true`, the opposite arrows will disable.\n\n\n\u0026nbsp;\n#### **\u003ca id=\"enableSwiping\"\u003e\u003c/a\u003eEnable Horizontal Swiping for Touch Screens**\n\nTo enable horizontal swiping for touch screens, pass in option `enableSwiping: true` when initializing the plugin:\n```javascript\n$('.nav-tabs').scrollingTabs({\n  enableSwiping: true  \n});\n```\nThis will enable swiping for any browser that supports [touch events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events).\n\n\u0026nbsp;\n#### **\u003ca id=\"enableRtlSupport\"\u003e\u003c/a\u003eEnable Right-to-Left Language Support**\n\nTo enable support for right-to-left languages, pass in option `enableRtlSupport: true` when initializing the plugin:\n```javascript\n$('.nav-tabs').scrollingTabs({\n  enableRtlSupport: true  \n});\n```\n\nWith this option enabled, the plugin will check the page's `\u003chtml\u003e` tag for attribute `dir=\"rtl\"` and will adjust its behavior accordingly.\n\n\u0026nbsp; \n#### **\u003ca id=\"widthMultiplier\"\u003e\u003c/a\u003eWidth Multiplier**\n\nIf you want the tabs container to be less than the full width of its parent element, pass in a `widthMultiplier` value that's less than 1. For example, if you want the tabs container to be half the width of its parent, pass in option `widthMultiplier: 0.5`:\n\n```javascript\n$('.nav-tabs').scrollingTabs({\n  widthMultiplier: 0.5\n});\n```\n\n\u0026nbsp;\n#### **\u003ca id=\"handleDelayedScrollbar\"\u003e\u003c/a\u003eHandle Delayed Scrollbar**\n\nIf you experience a situation where the right scroll arrow wraps to the next line due to a vertical scrollbar coming into existence on the page *after* the plugin already calculated its width without a scrollbar present, pass in option `handleDelayedScrollbar: true`:\n\n```javascript\n$('.nav-tabs').scrollingTabs({\n  handleDelayedScrollbar: true  \n});\n```\n\nThis would occur if, for example, the bulk of the page's content loaded after a delay, and only then did a vertical scrollbar become necessary.\n\nIt would also occur if a vertical scrollbar only appeared on selection of a particular tab that had more content than the default tab.\n\nThis is not enabled by default because, since a window resize event is not triggered by a vertical scrollbar appearing, it requires adding an iframe to the page that listens for resize events because a scrollbar appearing in the parent window *does* trigger a resize event in the iframe, which then dispatches a resize event to the parent, triggering the plugin to recalculate its width.\n\n\u0026nbsp;\n#### **\u003ca id=\"tabClickHandler\"\u003e\u003c/a\u003eTab Click Handler**\n\nYou can pass in a callback function that executes any time a tab is clicked using the `tabClickHandler` option.\nThe callback function is simply passed as the event handler to jQuery's .on(), so the function will receive the jQuery event as an argument, and 'this' inside the function will be the clicked tab's anchor element.\n\n```javascript\n$('.nav-tabs').scrollingTabs({\n  tabClickHandler: function (e) {\n    var clickedTabElement = this;\n  }\n});\n```\n\n\u0026nbsp; \n#### **\u003ca id=\"cssClassArrows\"\u003e\u003c/a\u003eCustom Scroll Arrow classes**\n\nYou can pass in custom values for the class attributes for the left- and right scroll arrows using options `cssClassLeftArrow` and `cssClassRightArrow`.\n\n```javascript\n$('.nav-tabs').scrollingTabs({\n  cssClassLeftArrow: 'fa fa-chevron-left',\n  cssClassRightArrow: 'fa fa-chevron-right'\n});\n```\nBy default, those `span` elements do not have a class defined.\n\nUsing different icons might require you to add custom styling to the arrows to position the icons correctly; the arrows can be targeted with these selectors:\n\nThis is what the arrows' markup looks like:\n```html\n\u003c!-- Left Arrow --\u003e\n\u003cdiv class=\"scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left\"\u003e\n  \u003cspan class=\"{{cssClassLeftArrow}}\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n\n\u003c!-- Right Arrow --\u003e\n\u003cdiv class=\"scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right\"\u003e\n  \u003cspan class=\"{{cssClassRightArrow}}\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\n\u0026nbsp;\n#### **\u003ca id=\"customArrowsContent\"\u003e\u003c/a\u003eCustom Scroll Arrow content**\n\nYou can pass in custom values for the left- and right scroll arrow HTML using options `leftArrowContent` and `rightArrowContent`. This will override any custom `cssClassLeftArrow` and `cssClassRightArrow` settings.\n\nFor example, if you wanted to use svg icons, you could set them like so:\n\n```javascript\n$('.nav-tabs').scrollingTabs({\n  leftArrowContent: [\n    '\u003cdiv class=\"custom-arrow\"\u003e',\n    '  \u003csvg class=\"icon icon-point-left\"\u003e',\n    '    \u003cuse xlink:href=\"#icon-point-left\"\u003e\u003c/use\u003e',\n    '  \u003c/svg\u003e',\n    '\u003c/div\u003e'\n  ].join(''),\n  rightArrowContent: [\n    '\u003cdiv class=\"custom-arrow\"\u003e',\n    '  \u003csvg class=\"icon icon-point-right\"\u003e',\n    '    \u003cuse xlink:href=\"#icon-point-right\"\u003e\u003c/use\u003e',\n    '  \u003c/svg\u003e',\n    '\u003c/div\u003e'\n  ].join('')\n});\n```\n\nYou would then need to add some CSS to make them work correctly if you don't give them the default `scrtabs-tab-scroll-arrow` classes. This plunk shows it working with svg icons:\nhttp://plnkr.co/edit/2MdZCAnLyeU40shxaol3?p=preview\n\nWhen using this option, you can also mark a child element within the arrow content as the click target if you don't want the entire content to be clickable. You do that my adding the CSS class `scrtabs-click-target` to the element that should be clickable, like so:\n\n```javascript\n$('.nav-tabs').scrollingTabs({\n  leftArrowContent: [\n    '\u003cdiv class=\"scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left\"\u003e',\n    '  \u003cbutton class=\"scrtabs-click-target\" type=\"button\"\u003e',\n    '    \u003ci class=\"custom-chevron-left\"\u003e\u003c/i\u003e',\n    '  \u003c/button\u003e',\n    '\u003c/div\u003e'\n  ].join(''),\n  rightArrowContent: [\n    '\u003cdiv class=\"scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right\"\u003e',\n    '  \u003cbutton class=\"scrtabs-click-target\" type=\"button\"\u003e',\n    '    \u003ci class=\"custom-chevron-right\"\u003e\u003c/i\u003e',\n    '  \u003c/button\u003e',\n    '\u003c/div\u003e'\n  ].join('')\n});\n```\n\n\u0026nbsp;\n#### **\u003ca id=\"customTabLiContent\"\u003e\u003c/a\u003eCustom Tab LI content (Data-driven tabs only)**\n\nWhen using data-driven tabs, to specify custom HTML for the tabs' LI elements, you can pass in option `tabsLiContent`.\n\nIt must be a string array, each entry being an HTML string that defines the tab LI element for the corresponding tab (i.e., same index) in the `tabs` array.\n\nThese entries will override the default `\u003cli class=\"nav-item\"\u003e`.\n\nSo, for example, if you had 3 tabs and you needed a custom `tooltip` attribute on each one, your `tabsLiContent` array might look like this (although you would probably build the array dynamically using the `myTabs` data):\n\n```javascript\n$('#tabs-inside-here').scrollingTabs({\n  tabs: myTabs,\n  tabsLiContent: [\n    '\u003cli class=\"nav-item\" tooltip=\"Custom TT 1\" class=\"custom-li\"\u003e\u003c/li\u003e',\n    '\u003cli class=\"nav-item\" tooltip=\"Custom TT 2\" class=\"custom-li\"\u003e\u003c/li\u003e',\n    '\u003cli class=\"nav-item\" tooltip=\"Custom TT 3\" class=\"custom-li\"\u003e\u003c/li\u003e'\n  ]\n});\n```\n\nThis plunk demonstrates its usage (in conjunction with `tabsPostProcessors`):\nhttp://plnkr.co/edit/ugJLMk7lmDCuZQziQ0k0\n\n\u0026nbsp;\n#### **\u003ca id=\"postProcessors\"\u003e\u003c/a\u003eTab LI and Anchor Post-Processors (Data-driven tabs only)**\n\nTo perform additional processing on the tab LI and/or Anchor elements after they've been created, you can pass in option `tabsPostProcessors`.\n\nThis is an array of functions, each one associated with an entry in the tabs array. When a tab element has been created, its associated post-processor function will be called with two arguments: the newly created $li and $a jQuery elements for that tab.\n\nThis allows you to, for example, attach a custom click handler to each anchor tag.\n\n```javascript\n$('#tabs-inside-here').scrollingTabs({\n  tabs: myTabs,\n  tabsPostProcessors: [\n    function ($li, $a) { console.log(\"Tab 1 clicked. $a.href: \", $a.attr('href')); },\n    function ($li, $a) { console.log(\"Tab 2 clicked. $a.href: \", $a.attr('href')); },\n    function ($li, $a) { console.log(\"Tab 3 clicked. $a.href: \", $a.attr('href')); }\n  ]\n});\n```\nThis plunk demonstrates its usage (in conjunction with `tabsLiContent`):\nhttp://plnkr.co/edit/ugJLMk7lmDCuZQziQ0k0\n\n\n\u0026nbsp;\n\n### Tips \u0026 Tricks\n\n\u0026nbsp;\n#### **\u003ca id=\"preventFlashUnwrappedTabs\"\u003e\u003c/a\u003ePreventing Flash of Unwrapped Tabs**\n\nTo prevent a flash of the tabs on page load/refresh before they get wrapped\ninside the scroller, you can hide your `.nav-tabs` and `.tab-content` with\nsome CSS (`display: none`).\n\nThe plugin will automatically unhide the `.nav-tabs` when they're ready,\nand you can hook into the [`ready.scrtabs` event](#events) (which gets fired when\nthe tabs are ready) to unhide your `.tab-content`:\n\n```javascript\n$('.nav-tabs')\n  .scrollingTabs()\n  .on('ready.scrtabs', function() {\n    $('.tab-content').show();\n  });\n```\n\n\u0026nbsp;\n#### **\u003ca id=\"forcingRefresh\"\u003e\u003c/a\u003eForcing a Refresh**\n\nThe scrolling container should automatically refresh itself on window resize, but to manually force a refresh you can call the plugin's `refresh` method:\n```javascript\n$('.nav-tabs').scrollingTabs('refresh');\n```\n\n\u0026nbsp;\n#### **\u003ca id=\"forcingScrollToActive\"\u003e\u003c/a\u003eForcing a Scroll to the Active Tab**\n\nOn window resize, the scrolling container should automatically scroll to the active tab if it's offscreen, but you can also programmatically force a scroll to the active tab any time (if, for example, you're programmatically setting the active tab) by calling the plugin's `scrollToActiveTab` method:\n```javascript\n$('.nav-tabs').scrollingTabs('scrollToActiveTab');\n```\n\n\u0026nbsp;\n#### **\u003ca id=\"customScss\"\u003e\u003c/a\u003eCustom SCSS**\n\nCustomize the SCSS by including `jquery.bs4-scrolling-tabs.scss` and overriding the following variables:\n* `$scrtabs-tabs-height` - The height of the tabs.\n* `$scrtabs-border-color` - The tabs border color.\n* `$scrtabs-foreground-color` - The text color.\n* `$scrtabs-background-color-hover` - The background color of the tabs when hovered over.\n\n\n\u0026nbsp;\n### \u003ca id=\"settingDefaults\"\u003e\u003c/a\u003eSetting Defaults\nAny options that can be passed into the plugin can also be set on the plugin's `defaults` object:\n```javascript\n$.fn.scrollingTabs.defaults.tabs = myTabs;\n$.fn.scrollingTabs.defaults.forceActiveTab = true;\n$.fn.scrollingTabs.defaults.scrollToTabEdge = true;\n$.fn.scrollingTabs.defaults.disableScrollArrowsOnFullyScrolled = true;\n$.fn.scrollingTabs.defaults.handleDelayedScrollbar = true;\n$.fn.scrollingTabs.defaults.reverseScroll = true;\n$.fn.scrollingTabs.defaults.widthMultiplier = 0.5;\n$.fn.scrollingTabs.defaults.enableSwiping = true;\n$.fn.scrollingTabs.defaults.enableRtlSupport = true;\n```\n\n\n\u0026nbsp;\n### \u003ca id=\"events\"\u003e\u003c/a\u003eEvents\nThe plugin triggers event `ready.scrtabs` when the tabs have been wrapped in\nthe scroller and are ready for viewing:\n\n```javascript\n$('.nav-tabs')\n  .scrollingTabs()\n  .on('ready.scrtabs', function() {\n    // tabs ready, do my other stuff...\n  });\n\n$('#tabs-inside-here')\n  .scrollingTabs({ tabs: tabs })\n  .on('ready.scrtabs', function() {\n    // tabs ready, do my other stuff...\n  });\n```\n\n\u0026nbsp;\n### \u003ca id=\"destroying\"\u003e\u003c/a\u003eDestroying the Plugin\nTo destroy the plugin, call its `destroy` method:\n```javascript\n$('#tabs-inside-here').scrollingTabs('destroy');\n```\n\nIf you were wrapping markup, the markup will be restored; if your tabs were data-driven, the tabs will be destroyed along with the plugin.\n\n\n\u0026nbsp;\n\nLicense\n-------\nMIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikejacobson%2Fbootstrap4-scrolling-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikejacobson%2Fbootstrap4-scrolling-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikejacobson%2Fbootstrap4-scrolling-tabs/lists"}