JSFiddle - React, Tailwind, and code Playground

by Vedankita Kumbhar

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="w-100 p-3">

  <div class="scroller scroller-left mt-2"><i class="fa fa-chevron-left"></i></div>
  <div class="scroller scroller-right mt-2"><i class="fa fa-chevron-right"></i></div>
  <div class="wrapper">
   <nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
  <a class="nav-item nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="public" aria-expanded="true">Tab1</a>
  <a class="nav-item nav-link" href="#tab2" role="tab" data-toggle="tab">Tab 2</a>
    <a class="nav-item nav-link" href="#tab3" role="tab" data-toggle="tab">Tab 3</a>
      <a class="nav-item nav-link" href="#tab4" role="tab" data-toggle="tab">Tab 4</a>
        <a class="nav-item nav-link" href="#tab5" role="tab" data-toggle="tab">Tab 5</a>
          <a class="nav-item nav-link" href="#tab6" role="tab" data-toggle="tab">Tab 6</a>
           <a class="nav-item nav-link" href="#tab7" role="tab" data-toggle="tab">Tab 7</a>
            <a class="nav-item nav-link" href="#tab8" role="tab" data-toggle="tab">Tab 8</a>
             <a class="nav-item nav-link" href="#tab9" role="tab" data-toggle="tab">Tab 9</a>
              <a class="nav-item nav-link" href="#tab10" role="tab" data-toggle="tab">Tab 10</a>
               <a class="nav-item nav-link" href="#tab11" role="tab" data-toggle="tab">Tab 11</a>
               <a class="nav-item nav-link" href="#tab12" role="tab" data-toggle="tab">Tab 12</a>
               <a class="nav-item nav-link"...

CSS

/* CSS used here will be applied after bootstrap.css */
.closeBtn:focus {
  outline: none;
}
    .close{
        color: gray;
      }

.wrapper {
    position:relative;
    margin:0 auto;
    overflow:hidden;
	padding:5px;
  	height:50px;
}

.list {
    position:absolute;
    left:0px;
    top:0px;
  	min-width:3500px;
  	
    margin-top:0px;
}

.list li{
	display:table-cell;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    vertical-align:middle;
}

.scroller {
  text-align:center;
  cursor:pointer;
  display:none;
  padding:7px;
  padding-top:11px;
  white-space:no-wrap;
  vertical-align:middle;
  background-color:#fff;
}

.scroller-right{
  float:right;
}

.scroller-left {
  float:left;
}

JavaScript

var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function(){
  var itemsWidth = 0;
  $('.list a').each(function(){
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
  });
  return itemsWidth;
};

var widthOfHidden = function(){
  return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
};

var getLeftPosi = function(){
  return $('.list').position().left;
};

var reAdjust = function(){
  if (($('.wrapper').outerWidth()) < widthOfList()) {
    $('.scroller-right').show().css('display', 'flex');
  }
  else {
    $('.scroller-right').hide();
  }
  
  if (getLeftPosi()<0) {
    $('.scroller-left').show().css('display', 'flex');
  }
  else {
    $('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
  	$('.scroller-left').hide();
  }
}

reAdjust();

$(window).on('resize',function(e){  
  	reAdjust();
});

$('.scroller-right').click(function() {
  
  $('.scroller-left').fadeIn('slow');
  $('.scroller-right').fadeOut('slow');
  
  $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){

  });
});

$('.scroller-left').click(function() {
  
	$('.scroller-right').fadeIn('slow');
	$('.scroller-left').fadeOut('slow');
  
  	$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
  	
  	});
});