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">
    <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 class="fa fa-arrow-right"></i></div>
            <div class="horizontal-tabs">
              <ul role="tablist" class="nav nav-tabs nav-tabs-horizontal">
                <li role="presentation" class="active"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/>White</a></li>
                <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/>Orange</a></li>
                <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/>Green</a></li>
                <li role="presentation"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/>White</a></li>
                <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/>Orange</a></li>
                <li role="presentation"><a href="#image03" data-toggle="tab"><img...

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(...