Скролл навигация для slick slider

// Слайдер 
var $carousel = $('.slick').slick({ 
  slidesToShow: 3, 
  slidesToScroll: 1,                
  dots: false, 
  infinite: false, 
  prevArrow: $('.slick-prev'), 
  nextArrow: $('.slick-next'), 
 
});   
const $slider = $('.slick'); 
$slider 
	.on('init', () => { 
		mouseWheel($slider) 
	}) 
	.slick({ 
		dots: true, 
		vertical: true, 
		infinite: false, 
	}) 
function mouseWheel($slider) { 
	$(window).on('wheel', { $slider: $slider }, mouseWheelHandler); 
} 
function mouseWheelHandler(event) { 
	event.preventDefault(); 
	const $slider = event.data.$slider; 
	const delta = event.originalEvent.deltaY; 
	if(delta > 0) { 
		$slider.slick('.slick-prev'); 
	} 
	else { 
		$slider.slick('.slick-next'); 
	} 
} 
 
// $carousel.on('wheel', (function(e) { 
//   e.preventDefault(); 
 
//   if (e.originalEvent.deltaY < 0) { 
//     $(this).slick('slickNext'); 
//   } else { 
//     $(this).slick('slickPrev'); 
//   } 
// })); 
 
// Фильтрация 
$('[data-filter=".idx-2"]').click(function(e) { 
  $carousel.slick('slickUnfilter'); 
  $carousel.slick('slickFilter', $('.idx-2') ); 
 
  console.log('click 2'); 
}); 
 
$('[data-filter=".idx-1"]').click(function(e) { 
  $carousel.slick('slickUnfilter'); 
  $carousel.slick('slickFilter', $('.idx-1') ); 
 
  console.log('click 1'); 
}); 
 
$('[data-filter="*"]').click(function(e) { 
  $carousel.slick('slickUnfilter'); 
  $carousel.slick('slickFilter', $('.element-item') ); 
 
  console.log('*'); 
}); 
 
// Скролл 
$(window).load(function(){ 
  $(".mcs-horizontal").mCustomScrollbar({ 
    axis:"x", 
    theme:"dark-thick", 
    autoExpandScrollbar:true, 
    advanced:{autoExpandHorizontalScroll:true}, 
    updateOnContentResize:true, 
    scrollbarPosition: 'outside', 
    scrollInertia: 200 
  }); 
});

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'); 
 
img { 
  margin: auto; 
} 
 
.slick-arrow { 
  position: absolute; 
  top:50%; 
  margin-top: -20px; 
  z-index: 10; 
} 
 
.slick-prev { 
  left: -50px; 
} 
 
.slick-next { 
  right: -50px; 
} 
 
.element-item { 
  border:1px solid #fff; 
} 
 
.button-group .active .btn { 
  color: #fff; 
    background-color: #28a745; 
    border-color: #28a745; 
} 
 
.element-item { 
  /* position: static !important; */ 
  /*width: 200px !important;*/ 
} 
 
.slick, 
.slick-wrap { 
  /* height: 200px !important; */ 
  position: relative; 
} 
 
.mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,  
.mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal { 
  bottom: -50px !important; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>   
 
 
 
<div class="container py-4"> 
  <div class="row justify-content-center"> 
    <div class="col-md-8"> 
 
 
      <ul class="list-inline button-group "> 
        <li class="list-inline-item active"> 
          <a href="#idx-all" class="btn btn-secondary btn-sm" data-filter="*"> 
            Показать все 
          </a> 
        </li> 
        <li class="list-inline-item"> 
          <a href="#idx-2" class="btn btn-secondary btn-sm" data-filter=".idx-2"> 
            idx-2 
          </a> 
        </li> 
        <li class="list-inline-item"> 
          <a href="#idx-1" class="btn btn-secondary btn-sm" data-filter=".idx-1"> 
            idx-1 
          </a> 
        </li> 
      </ul> 
 
      <div class="slick-wrap "> 
        <div class="slick-btns"> 
          <button class="btn btn-success slick-prev"> < </button> 
          <button class="btn btn-success slick-next"> > </button> 
        </div> 
 
        <div class="slick grid mcs-horizontal"> 
          <div class="element-item idx-1"> 
            <img src="https://dummyimage.com/200x300/ccc/fff&text=1" alt="" class="img-fluid"> 
          </div> 
          <div class="element-item idx-2"> 
            <img src="https://dummyimage.com/200x300/ccc/fff&text=2" alt="" class="img-fluid"> 
          </div> 
          <div class="element-item idx-1"> 
            <img src="https://dummyimage.com/200x300/ccc/fff&text=3" alt="" class="img-fluid"> 
          </div> 
          <div class="element-item idx-2"> 
            <img src="https://dummyimage.com/200x300/ccc/fff&text=4" alt="" class="img-fluid"> 
          </div> 
          <div class="element-item idx-1"> 
            <img src="https://dummyimage.com/200x300/ccc/fff&text=5" alt="" class="img-fluid"> 
          </div> 
          <div class="element-item idx-2"> 
            <img src="https://dummyimage.com/200x300/ccc/fff&text=6" alt="" class="img-fluid"> 
          </div> 
        </div> 
      </div> 
 
    </div> 
  </div> 
</div>