Custom scroll navigation for slick slider

I have a some slick slider with custom mCustomScrollbar scrollbar:

// Слайдер
var $carousel = $('.slick').slick({
  slidesToShow: 3,
  slidesToScroll: 1,               
  dots: false,
  infinite: false,
  prevArrow: $('.slick-prev'),
  nextArrow: $('.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://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>

Task: The slider should scroll one slide when clicking on the navigation buttons (arrows) and should scroll without falling apart. Scrolling navigation should also scroll one slide ( preferably ).

Question: How can I implement a custom scrolling navigation to the slick slider (with filtering) ?

Recommended topics

Hot tags