3

Есть такой slick слайдер с фильтром и кастомным mCustomScrollbar скроллом.

// Слайдер
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>

Задача: Слайдер должен перелистывать 1 слайд при клике на кнопки навигации + должен скроллиться не разваливаясь тоже желательно по 1 слайду.

Вопрос: Как можно реализовать скролл навигацию к slick слайдеру?

3
  • Можно через событие wheel stackoverflow.com/questions/46508975/… codepen.io/Grawl/pen/mMLQQb
    – Dias
    1 окт 2018 в 16:19
  • @Dias, это без вариантов, только mouseWheel поможет, но я что-то не могу их (слайдер и скролл) связать.
    – SVE
    1 окт 2018 в 16:42
  • @HamSter могу поинтересоваться, зачем Вам скролл, если есть кнопки навигации и возможность свайпить? Только для индикации состояния и положения?
    – UModeL
    8 окт 2018 в 11:46

1 ответ 1

0

Не могу понять, из-за чего ошибка, но вроде должно быть вот так:

// Слайдер
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>

2
  • без es6 бы из-за него и ошибки! const вроде как раз объявляется, а у вас переопределение слайдера или не понятно)
    – SVE
    7 окт 2018 в 15:41
  • @HamSter Тогда не знаю ¯ _(ツ)_/¯
    – Ver Nick
    7 окт 2018 в 17:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.