<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div>

<script> var hidWidth; var scrollBarWidths = $('.scroller-right').width() + $('.scroller-left').width(); var widthOfList = function () { var itemsWidth = 0; $('.list li').each(function () { var itemWidth = $(this).outerWidth(); itemsWidth += itemWidth; }); return itemsWidth; }; var widthOfHidden = function () { return (($('.wrapper-list').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths; }; var getLeftPosi = function () { return $('.wrapper-list .list').position().left; }; var timeout; $list = $('.wrapper-list .list'); $('.scroller-left').hide(); $('.scroller-right').on('click', function (event) { $('.scroller-left').show(); event.preventDefault(); //timeout = setInterval(function () { move = widthOfHidden() - 150; move = move < -100 ? -100 : move; if (move < 0) $list.animate({ left: "+=" + move + "px" }, 100, 'linear'); if (move > -100) { $('.scroller-right').hide(); clearInterval(timeout); $list.stop(true, true); return false; } //}, 100); }) //.on('mouseup mouseleave', function (event) { // event.preventDefault(); // clearInterval(timeout); //}); $('.scroller-left').on('click', function (event) { $('.scroller-right').show(); event.preventDefault(); //timeout = setInterval(function () { move = getLeftPosi(); move = move < -85 ? -85 : move; if (move < 0) $list.animate({ left: "-=" + move + "px" }, 85, 'linear'); if (move > -85) { $('.scroller-left').hide(); clearInterval(timeout); $list.stop(true, true); return false; } //}, 100); }) // .on('mouseup mouseleave', function (event) { // event.preventDefault(); // clearInterval(timeout); //}); </script>