menu carousel

HTML

<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css">
<div class="tabs">
  <ul class="tab-menu">
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>
    <li><a href="">Menu 4</a></li>
    <li><a href="">Menu 5</a></li>
    <li><a href="">Menu 6</a></li>
    <li><a href="">Menu 7</a></li>
    <li><a href="">Menu 8</a></li>
    <li><a href="">Menu 9</a></li>
    <li><a href="">Menu 10</a></li>
    <li><a href="">Menu 11</a></li>
    <li><a href="">Menu 12</a></li>
    <li><a href="">Menu 13</a></li>
    <li><a href="">Menu 14</a></li>
    <li><a href="">Menu 15</a></li>
    <li><a href="">Menu 16</a></li>
    <li><a href="">Menu 17</a></li>
    <li><a href="">Menu 18</a></li>
    <li><a href="">Menu 19</a></li>
    <li><a href="">Menu 20</a></li>
    <li><a href="">Menu 21</a></li>
    <li><a href="">Menu 22</a></li>
    <li><a href="">Menu 23</a></li>
    <li><a href="">Menu 24</a></li>
    <li><a href="">Menu 25</a></li>
    <li><a href="">Menu 26</a></li>
    <li><a href="">Menu 27</a></li>
    <li><a href="">Menu 28</a></li>
    <li><a href="">Menu 29</a></li>
    <li><a href="">Menu 30</a></li>
    <li><a href="">Menu 31</a></li>
    <li><a href="">Menu 32</a></li>
    <li><a href="">Menu 33</a></li>
    <li><a href="">Menu 34</a></li>
    <li><a href="">Menu 35</a></li>
    <li><a href="">Menu 36</a></li>
    <li><a href="">Menu 37</a></li>
    <li><a href="">Menu 38</a></li>
    <li><a href="">Menu 39</a></li>
    <li><a href="">Menu 40</a></li>
    <li><a href="">Menu 41</a></li>
    <li><a href="">Menu 42</a></li>
    <li><a href="">Menu 43</a></li>
    <li><a href="">Menu 44</a></li>
    <li><a href="">Menu 45</a></li>
    <li><a href="">Menu 46</a></li>
    <li><a href="">Menu 47</a></li>
    <li><a href="">Menu 48</a></li>
    <li><a href="">Menu 49</a></li>
    <li><a href="">Menu 50</a></li>
   ...

SCSS

body {
  background: black;
}

.tabs {
  white-space: nowrap;
  .slick-list {
    margin-right: 160px;
  }
  .slick-arrow {
    position: absolute;
    width: 80px;
    top: 0;
    &.slick-next {
      right: 0px;
    }
    &.slick-prev {
      right: 80px;
    }
  }
  .tab-menu {
    position: relative;
    li {
      > a {
        display: inline-block;
        margin: 0 5px;
        text-decoration: none;
        color: green;
      }
      &.slick-current {
        > a {
          color: red;
          
        }
      }
    }
  }
}

JavaScript

var tabs = $('.tabs');
tabs.each(function() {
  var tab = $(this),
    tab_menu = tab.find('.tab-menu'),
    tab_menu_items = tab_menu.children();
  tab_menu.slick({
    infinite: true,
    speed: 300,
    slidesToShow: tab_menu_items.length - 1,
    centerMode: true,
    variableWidth: true
  });
  tab_menu.on('click', 'a', function() {
    tab_menu.slick('slickGoTo', $(this).closest('li').index() + 1)
    return false;
  });
});