<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="slide-nav"> <div class="slide-left-outsize"> <span class="glyphicon glyphicon-backward"></span> </div> <div class="slide-left"> <span class="glyphicon glyphicon-chevron-left"></span> </div> <div class="slide-center"> <div class="list-cat"> <div class="box-cat"> <div class="cat-preview">A</div> <label>cat A</label> </div> <div class="box-cat"> <div class="cat-preview">B</div> <label>cat B</label> </div> <div class="box-cat"> <div class="cat-preview">C</div> <label>cat C</label> </div> <div class="box-cat"> <div class="cat-preview">D</div> <label>cat D</label> </div> <div class="box-cat"> <div class="cat-preview">E</div> <label>cat E</label> </div> <div class="box-cat"> <div class="cat-preview">F</div> <label>cat F</label> </div> <div class="box-cat"> <div class="cat-preview">G</div> <label>cat G</label> </div> <div class="box-cat"> <div class="cat-preview">H</div> <label>cat H</label> </div> <div class="box-cat"> <div class="cat-preview">I</div> <label>cat I</label> </div> <div class="box-cat"> <div class="cat-preview">J</div> <label>cat J</label> </div> <div class="box-cat"> <div class="cat-preview">K</div> <label>cat K</label> </div> <div class="box-cat"> <div class="cat-preview">L</div> <label>cat L</label> </div> <div class="box-cat"> <div class="cat-preview">M</div> <label>cat M</label> </div> <div class="box-cat"> <div class="cat-preview">N</div> <label>cat N</label> </div> <div class="box-cat"> <div class="cat-preview">O</div> <label>cat O</label> </div> <div class="box-cat"> <div class="cat-preview">P</div> <label>cat P</label> </div> <div class="box-cat"> <div class="cat-preview">Q</div> <label>cat Q</label> </div> <div class="box-cat"> <div class="cat-preview">R</div> <label>cat R</label> </div> <div class="box-cat"> <div class="cat-preview">S</div> <label>cat S</label> </div> <div class="box-cat"> <div class="cat-preview">T</div> <label>cat T</label> </div> <div class="box-cat"> <div class="cat-preview">U</div> <label>cat U</label> </div> <div class="box-cat"> <div class="cat-preview">V</div> <label>cat V</label> </div> <div class="box-cat"> <div class="cat-preview">W</div> <label>cat W</label> </div> <div class="box-cat"> <div class="cat-preview">X</div> <label>cat X</label> </div> <div class="box-cat"> <div class="cat-preview">Y</div> <label>cat Y</label> </div> <div class="box-cat"> <div class="cat-preview">Z</div> <label>cat Z</label> </div> </div> </div> <div class="slide-right"> <span class="glyphicon glyphicon-chevron-right"></span> </div> <div class="slide-right-outsize"> <span class="glyphicon glyphicon-forward"></span> </div> </div> </div>

.slide-nav { height: 80px; background-color: #fff; position: relative; } .slide-right-outsize { color: #01c0c8; width: 40px; height: 100%; cursor: pointer; text-align: center; line-height: 75px; position: absolute; z-index: 101; top: 0; right: 0; background-color: #fff; } .slide-right { color: #01c0c8; width: 40px; height: 100%; cursor: pointer; /*border: 1px solid #fff;*/ text-align: center; line-height: 75px; position: absolute; z-index: 101; top: 0; right: 40px; background-color: #fff; } .slide-center { display: block; width: 100%; /*border: 1px solid #fff;*/ height: 100%; overflow: hidden; position: relative; } .slide-center.open{ left: -50px; } .list-cat { margin-right: 80px; white-space: nowrap; margin-left: 80px; height: 100%; padding-top: 10px; position: absolute; top: 0; left: 0; transition: all .7s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; user-select: none; } .box-cat { margin-right: 10px; /*border: 1px solid #ddd;*/ width: 60px; height: 100%; display: inline-block; cursor: pointer; vertical-align: top; } .cat-preview { border: 1px solid #01c0c8; width: 40px; height: 40px; margin: 0 auto; font-size: 30px; text-align: center; color: #01c0c8; border-radius: 3px; } .box-cat > label { text-align: center; width: 100%; font-size: 12px; font-weight: 400; color: #01c0c8; word-break: break-all; white-space: normal; } .slide-left-outsize { color: #01c0c8; width: 40px; height: 100%; position: absolute; top: 0; left: 0; z-index: 101; text-align: center; line-height: 75px; cursor: pointer; background-color: #fff } .slide-left { color: #01c0c8; width: 40px; height: 100%; cursor: pointer; /*border: 1px solid #fff;*/ text-align: center; line-height: 75px; position: absolute; z-index: 101; top: 0; left: 40px; background-color: #fff; }

$(document).ready(function() { var slide = 0; $(".slide-left").click(function() { slide = slide + 200; if (slide > 0) { slide = 0; } $(".list-cat").css({'left': slide+'px'}); }); $(".slide-right").click(function() { slide = slide - 200; let listWidth = $(".list-cat").width(); let centerWidth = $(".slide-center").width() - 160; if (slide < -(listWidth - centerWidth)) { slide = -(listWidth - centerWidth); } $(".list-cat").css({'left': slide+'px'}); }); $(".slide-left-outsize").click(function() { slide = 0; $(".list-cat").css({'left': slide}); }); $(".slide-right-outsize").click(function() { let listWidth = $(".list-cat").width(); let centerWidth = $(".slide-center").width() - 160; slide = -(listWidth - centerWidth); $(".list-cat").css({'left': slide+'px'}); }); });