<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" id="myscroller"> <ul> <li class="active"> <a href="#1">1</a></li> <li><a href="#2">2</a></li> <li><a href="#3">3</a></li> <li><a href="#4">4</a></li> <li><a href="#5">5</a></li> <li><a href="#6">6</a></li> <li><a href="#7">7</a></li> <li><a href="#8">8</a></li> </ul> </div>

div#myscroller.container { width: 1024px; overflow: hidden; margin:0 auto; background:#efefef; padding: 15px 0; border:1px solid #c9c9c9; position:relative; z-index:45; } div#myscroller.container:after{ content:"8"; position:absolute; top:0; bottom:0; z-index:-1; height:100%; padding:100px; margin:0 auto; background:#bfbfbf; color:#bfbfbf!important; display: block; left:calc(100% - 50% - 105px) ; font-weight: bold; } div#myscroller.container ul { white-space: nowrap; transition: all ease 750ms; position:relative; } div#myscroller.container ul {margin:0;} div#myscroller.container ul li { display: inline-block; background: green; margin:0; } div#myscroller.container ul li a { padding: 100px; display: block; color: white; font-weight: bold; text-decoration: none; transition:background 0.3s ease-in-out; } div#myscroller.container ul li.active{ background:#dfdfdf; } div#myscroller.container ul li.active a{ color:#ff0055!important; }

$(document).ready(function () { var scrollTo = 0; $('body').on('click', "a", function () { var activeItem = $('li.active'); var selectedItem = $(this).parent() var activeIndex = $('li').index(activeItem); var selectedIndex = $('li').index(selectedItem); scrollTo =- selectedItem.position().left + $('.container').width() / 2 - selectedItem.width() / 2; $('ul').css('transform', 'translateX(' + scrollTo + 'px)'); activeItem.removeClass('active'); selectedItem.addClass('active'); }); });