JSFiddle - React, Tailwind, and code Playground

by Adi Jaya

HTML

<div class="_cont_plugin_tse">

<div class="_ts_cont_btn_N_P">   <!-- auto show hide -->
	<button class="_ts_btn_P_plugin" data-role="P">&lt;&lt;</button>
	<button class="_ts_btn_N_plugin" data-role="N">&gt;&gt;</button>
</div>

<div id="container-ts-plugin-area" class="plugin-area">
	<div class="container-ts-plugin-area">
    <div class="ts-plugin-area" data-position="1">1</div>
    <div class="ts-plugin-area" data-position="2">2</div>
    <div class="ts-plugin-area" data-position="3">3</div>
    <div class="ts-plugin-area" data-position="4">4</div>
    <div class="ts-plugin-area" data-position="5">5</div>
    <div class="ts-plugin-area" data-position="6">6</div>   
	</div>
</div>
</div>

<h2>splitter area to left or right</h2>

CSS

._ts_cont_btn_N_P {
    overflow: hidden;
}
.plugin-area {
    overflow-x:auto;
    overflow-y:hidden;
}

.ts-plugin-area {
  width:100px;
  height:100px;
  background-color:red;
  display:block;
  float:left;
  margin:0 5px;
}

._ts_btn_prev_plugin {
  float:left;
}
._ts_btn_N_plugin {
  float:right;  
}

::-webkit-scrollbar {
    width: 12px;
    height : 8px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #105d9a;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
	background: #105d9a; 
}

JavaScript

$(function(){
	var t = $('#container-ts-plugin-area'),
		s = t.find('.container-ts-plugin-area'),

		e = s.find('.ts-plugin-area'),
		f = (e.outerWidth()+parseInt(e.css('margin-left'),10)+parseInt(e.css('margin-right'),10))*e.length;
	s.css('width', f);
	$('._ts_cont_btn_N_P button').on("click mouseenter", function() {   
		var role = $(this).data('role');
		t.stop().animate({
			scrollLeft: (role=="N")?"+=300px":"-=300px"
		}, 400);
	});
});