<h2 class="text-center">Horizontal Scroll Menu</h2>
<div class="menu-wrapper">
  <div class="menu-item">
    <a href="#" class="active">Home</a>
    <a href="#">Contact</a>
    <a href="#">Courses</a>
    <a href="#">About</a>
    <a href="#">Service</a>
    <a href="#">Events</a>
    <a href="#">Courses</a>
    <a href="#">FAQ</a>
    <a href="#">Home</a>
    <a href="#">Contact</a>
    <a href="#">Courses</a>
    <a href="#">About</a>
    <a href="#">Service</a>
    <a href="#">Events</a>
    <a href="#">Courses</a>
    <a href="#">FAQ</a>
  </div> 
  <span class="pointer left-pointer dis">
    <i class="fa fa-chevron-left"></i>
  </span>
  <span class="pointer right-pointer">
    <i class="fa fa-chevron-right"></i>
  </span>
</div>

.menu-wrapper {
  max-width: 500px;
  height: 40px;
  padding: 0 30px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}
.menu-wrapper .menu-item {
  height: 100%;
  overflow: auto;
  white-space: nowrap;
}
.menu-wrapper .menu-item a {
  display: inline-block;
  padding: 5px 20px;
  color: #333;
  height: 100%;
}
.menu-wrapper .menu-item a:hover {
  text-decoration: none;
}
.menu-wrapper .menu-item a:first-child {
  padding-left: 5px;
}
.menu-wrapper .menu-item::-webkit-scrollbar {
  display: none;
}
.menu-wrapper .pointer {
  height: 40px;
  width: 30px;
  line-height: 38px;
  text-align: center;
  position: absolute;
  top: 0;
}
.menu-wrapper .pointer i {
  color: #333;
  cursor: pointer;
}
.menu-wrapper .left-pointer {
  left: 0;
}
.menu-wrapper .right-pointer {
  right: 0;
}
.menu-wrapper .dis i {
  color: #ccc;
}
a.active{
  color: red;
}

var lp, rp, mItems, menu, sc, pos;
lp = $(".left-pointer");
rp = $(".right-pointer");
mItems = $(".menu-item");
// var tItemsWidth = 0;
// mItems.find("a").each(function(){
//   tItemsWidth += $(this).outerWidth(true);
// });
// $(".menu-item a").click(function(){
//   $(".menu-item a").removeclass('active');
//   $(this).addclass('active');
// });

lp.click(function(){
  sc = mItems.width() - 60;
  pos = mItems.scrollLeft() - sc;
  mItems.animate({'scrollLeft': pos}, 'slow');
});
rp.click(function(){
  sc = mItems.width() - 60;
  pos = mItems.scrollLeft() + sc;
  mItems.animate({'scrollLeft': pos}, 'slow');
});
var scrollLeftPrev = 0; 
mItems.scroll(function(){
  var newScrollLeft = mItems.scrollLeft(),width=mItems.width(),
            scrollWidth=mItems.get(0).scrollWidth;
  var offset=8;
  console.log(scrollWidth - newScrollLeft - width);
  if (scrollWidth - newScrollLeft - width < offset) {
            console.log('right end');
    $(".right-pointer").addClass("dis");
  }else{
    $(".right-pointer").removeClass("dis");
  }
  if( $(this).scrollLeft() == 0){
    $(".left-pointer").addClass("dis");
  }else{
    $(".left-pointer").removeClass("dis");
  }
  scrollLeftPrev = newScrollLeft;
});

const slider1 = document.querySelector('.menu-item');
let isDown = false;
let startX;
let scrollLeft;
slider1.addEventListener('mousedown', (e) => {
  isDown = true;
  slider1.classList.add('active');
  startX = e.pageX - slider1.offsetLeft;
  scrollLeft = slider1.scrollLeft;
});
slider1.addEventListener('mouseleave', () => {
  isDown = false;
  slider1.classList.remove('active');
});
slider1.addEventListener('mouseup', () => {
  isDown = false;
  slider1.classList.remove('active');
});
slider1.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider1.offsetLeft;
  const walk = (x - startX) * 3; //scroll-fast
  slider1.scrollLeft = scrollLeft - walk;
});