JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="Bootstrap nav tab scrollable optimized for mobile site navigation.">
    <meta name="author" content="Lucas Lazaro">

    <title>Demo: Bootstrap Nav Tav Scrollable</title>

    <!-- Bootstrap core CSS -->
    <link href="external/bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome - used for the arrows -->
    <link href="external/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Demo css -->
    <link href="external/css/demo.css" rel="stylesheet">

    <link href="bootstrap-nav-tab-scrollable.css" rel="stylesheet">    
  </head>

  <body>

    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Bootstrap Nav Tab Scrollable</a>
        </div>
      </div>
    </nav>

    <div class="container">

      <h1>Example <small>Image gallery for m-commerce (try resizing your viewport to simulate a mobile screen!)</small> </h1>


      <div class="row">
        <div class="col-xs-12">
          <div id="js_image_selection" class="horizontal-scrollable-tabs">
            <div class="scroller arrow-left"><i class="fa fa-arrow-left"></i></div>
            <div class="scroller arrow-right"><i...

CSS

.horizontal-scrollable-tabs {
  min-height: 50px;
}

.horizontal-scrollable-tabs .arrow-right {
  float: right;
}
.horizontal-scrollable-tabs .arrow-left {
  float: left;
}
/* Customize your arrows here */
.horizontal-scrollable-tabs .scroller {
  font-size: 18px;
  color: red;
  padding: 10px 10px; 
  display: none;
}
.horizontal-scrollable-tabs .scroller.disabled {
  color: gray;
}
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal {
  overflow-x: auto;
  overflow-y: hidden;
  display: -webkit-box;
  display: -moz-box;
}
/* As it has a mobile focus the scrollbar is removed */
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal::-webkit-scrollbar {
  width: 0 !important;
}
/* It's good to add a min-width so that the items have the same width */
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal > li {
  float: none;
  min-width: 50px;
  text-align: center;
}

JavaScript

// Add Horizontal Tabs to jquery
(function ($){

  $.fn.horizontalTabs = function() {
    // Variable creation
    var $elem = $(this),
    widthOfReducedList = $elem.find('.nav-tabs-horizontal').width(),
    widthOfList = 0,
    currentPos = 0,
    adjustScroll = function () {
      widthOfList = 0;
      $elem.find('.nav-tabs-horizontal li').each(function(index, item) {
        widthOfList += $(item).width();
      });

      widthAvailale = $elem.width();

      if (widthOfList > widthAvailale) {
        $elem.find('.scroller').show();
        updateArrowStyle(currentPos);
        widthOfReducedList = $elem.find('.nav-tabs-horizontal').width();
      } else {
        $elem.find('.scroller').hide();
      }
    },
    scrollLeft = function () {
      $elem.find('.nav-tabs-horizontal').animate({
          scrollLeft: currentPos - widthOfReducedList
      }, 500);

      if (currentPos - widthOfReducedList > 0) {
        currentPos -= widthOfReducedList;
      } else {
        currentPos = 0;
      }
    },
    scrollRight = function () {
      $elem.find('.nav-tabs-horizontal').animate({
        scrollLeft: currentPos + widthOfReducedList
      }, 500);

      if ( (currentPos + widthOfReducedList) < (widthOfList - widthOfReducedList)) {
        currentPos += widthOfReducedList;
      } else {
        currentPos = (widthOfList - widthOfReducedList);
      }
    },
    manualScroll = function () {
      currentPos = $elem.find('.nav-tabs-horizontal').scrollLeft();

      updateArrowStyle(currentPos);
    },
    updateArrowStyle = function (position) {
      if (position >= (widthOfList - widthOfReducedList)) {
        $elem.find('.arrow-right').addClass('disabled');
      } else {
        $elem.find('.arrow-right').removeClass('disabled');
      };

      if (position <= 0) {
        $elem.find('.arrow-left').addClass('disabled');
      } else {
        $elem.find('.arrow-left').removeClass('disabled');
      };
    };

    // Event binding
    $(window).resize(...