Фильтрация slick slider подобно фильтрации isotop

254
03 августа 2018, 21:40

Есть такой слайдер (использую slick slider): 

$('.slider-for').slick({ 
  slidesToShow: 1, 
  slidesToScroll: 1, 
  arrows: true, 
  prevArrow:'<button class="slick-prev"> < </button>', 
  nextArrow:'<button class="slick-next"> > </button>', 
  asNavFor: '.slider-nav', 
  infinite:false, 
}); 
 
$('.slider-nav').slick({ 
  slidesToShow: 3, 
  slidesToScroll: 1, 
  arrows: false, 
  asNavFor: '.slider-for', 
  focusOnSelect: true, 
  infinite:false, 
}); 
 
 
 
var filtered = false; 
 
 
var indexID = $('.active.js-filter').data('filter'); 
 
if(indexID === 2) { 
 
  if (filtered === false) { 
    $('.slider-for').slick('slickFilter','.filter-2'); 
    $('.slider-nav').slick('slickFilter','.filter-2'); 
    $('.slider-for').slick('slickGoTo',0); 
    $('.slider-nav').slick('slickGoTo',0); 
 
    //$('.js-filter').removeClass('active'); 
    //$('[data-filter="1"]').addClass('active'); 
 
    filtered = true; 
  } else { 
    $('.slider-for').slick('slickUnfilter'); 
    $('.slider-nav').slick('slickUnfilter'); 
    $('.slider-for').slick('slickGoTo',0); 
    $('.slider-nav').slick('slickGoTo',0); 
 
    //$('[data-filter="1"]').removeClass('active'); 
 
    filtered = false; 
  } 
} 
 
 
$('.js-filter').on('click', function(){ 
  var whichID = $(this).data('filter'); 
  //console.log(whichID); 
  if(whichID != 'all'){ 
    if( $('.sl-slider').hasClass('filtered') ){ 
      // $('.slider').removeClass('filtered'); 
      $('.slider-for').slick('slickUnfilter'); 
      $('.slider-nav').slick('slickUnfilter'); 
      $('.slider-for').slick('slickGoTo',0); 
      $('.slider-nav').slick('slickGoTo',0); 
      filtered = false; 
    } else{ 
      $('.sl-slider').addClass('filtered'); 
    } 
    if(whichID === 1){ 
      if (filtered === false) { 
        $('.slider-for').slick('slickFilter','.filter-1'); 
        $('.slider-nav').slick('slickFilter','.filter-1'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('.js-filter').removeClass('active'); 
        $('[data-filter="1"]').addClass('active'); 
 
        filtered = true; 
      } else { 
        $('.slider-for').slick('slickUnfilter'); 
        $('.slider-nav').slick('slickUnfilter'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('[data-filter="1"]').removeClass('active'); 
 
        filtered = false; 
      } 
    } else if(whichID === 2){ 
      if (filtered === false) { 
        $('.slider-for').slick('slickFilter','.filter-2'); 
        $('.slider-nav').slick('slickFilter','.filter-2'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('.js-filter').removeClass('active'); 
        $('[data-filter="2"]').addClass('active'); 
 
 
        filtered = true; 
      } else { 
        $('.slider-for').slick('slickUnfilter'); 
        $('.slider-nav').slick('slickUnfilter'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('[data-filter="2"]').removeClass('active'); 
 
        filtered = false; 
      } 
    } else if(whichID === 12){ 
      if (filtered === false) { 
        $('.slider-for').slick('slickFilter','.filter-12'); 
        $('.slider-nav').slick('slickFilter','.filter-12'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('.js-filter').removeClass('active'); 
        $('[data-filter="12"]').addClass('active'); 
 
        filtered = true; 
      } else { 
        $('.slider-for').slick('slickUnfilter'); 
        $('.slider-nav').slick('slickUnfilter'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('[data-filter="12"]').removeClass('active'); 
 
        filtered = false; 
      } 
    } else if(whichID === 11){ 
      if (filtered === false) { 
        $('.slider-for').slick('slickFilter','.filter-11'); 
        $('.slider-nav').slick('slickFilter','.filter-11'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('.js-filter').removeClass('active'); 
        $('[data-filter="11"]').addClass('active'); 
 
        filtered = true; 
      } else { 
        $('.slider-for').slick('slickUnfilter'); 
        $('.slider-nav').slick('slickUnfilter'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('[data-filter="11"]').removeClass('active'); 
 
        filtered = false; 
      } 
    } else if(whichID === 21){ 
      if (filtered === false) { 
        $('.slider-for').slick('slickFilter','.filter-21'); 
        $('.slider-nav').slick('slickFilter','.filter-21'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('.js-filter').removeClass('active'); 
        $('[data-filter="21"]').addClass('active'); 
 
        filtered = true; 
      } else { 
        $('.slider-for').slick('slickUnfilter'); 
        $('.slider-nav').slick('slickUnfilter'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('[data-filter="21"]').removeClass('active'); 
 
        filtered = false; 
      } 
    } else if(whichID === 22){ 
      if (filtered === false) { 
        $('.slider-for').slick('slickFilter','.filter-22'); 
        $('.slider-nav').slick('slickFilter','.filter-22'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('.js-filter').removeClass('active'); 
        $('[data-filter="22"]').addClass('active'); 
 
        filtered = true; 
      } else { 
        $('.slider-for').slick('slickUnfilter'); 
        $('.slider-nav').slick('slickUnfilter'); 
        $('.slider-for').slick('slickGoTo',0); 
        $('.slider-nav').slick('slickGoTo',0); 
 
        $('[data-filter="22"]').removeClass('active'); 
 
        filtered = false; 
      } 
    } 
 
  } else{ 
    $('.sl-slider').removeClass('filtered'); 
    $('.slider-for').slick('slickUnfilter'); 
    $('.slider-nav').slick('slickUnfilter'); 
    $('.slider-for').slick('slickGoTo',0); 
    $('.slider-nav').slick('slickGoTo',0); 
 
    $('.js-filter').removeClass('active'); 
  } 
 
});
* { 
  box-sizing:border-box; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  padding: 0; 
  margin: 0; 
} 
 
img { 
  max-width: 100%; 
} 
 
.slick-arrow { 
  position: absolute; 
  z-index: 5; 
  top: 50%; 
  margin-top: -10px; 
  width: 20px; 
  height: 40px; 
  font-size:20px; 
  line-height: 20px; 
  font-family: monospace; 
  text-align: center; 
  cursor:pointer; 
} 
 
.slick-prev { 
  left: 0; 
} 
 
.slick-next { 
  right: 0; 
} 
 
.sl-item { 
  position: relative; 
} 
 
.sl-item span { 
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 2; 
  background: #000; 
  color:#fff; 
} 
 
ul>li>button { 
  font-family: monospace; 
  font-size:15px; 
  text-decoration: none; 
  display: inline-block; 
  border:1px solid #333; 
  padding: 5px; 
  color:#333; 
  cursor: pointer; 
} 
 
button.active { 
  background: red; 
  color:#fff; 
} 
 
.sl-slider { 
  max-width: 500px; 
  width: 100%; 
  margin: 2rem auto; 
} 
 
.sl-for { 
  height: 300px; 
  overflow: hidden; 
}
<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> 
   
<ul> 
  <li> 
    <button class="js-filter" data-filter="1">slider gallery 1</button> 
 
    <ul> 
      <li> 
        <button class="js-filter" data-filter="11">slider sub gallery 11</button> 
      </li> 
      <li> 
        <button class="js-filter" data-filter="12">slider sub gallery 12</button> 
      </li> 
    </ul> 
  </li> 
  <li> 
    <button class="js-filter active" data-filter="2">slider gallery 2</button> 
 
    <ul> 
      <li> 
        <button class="js-filter" data-filter="21">slider sub gallery 21</button> 
      </li> 
      <li> 
        <button class="js-filter" data-filter="22">slider sub gallery 22</button> 
      </li> 
    </ul> 
  </li> 
</ul> 
 
<div class="sl-slider slider-for filtered"> 
 
  <div class="sl-item filter-2 filter-22"> 
      <span>22</span> 
      <img src="https://images.unsplash.com/photo-1529346720291-0c190cc4c804?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c1c62318bf1dfbc9230f8bab8b39f78e&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
 
    <div class="sl-item filter-1 filter-11"> 
      <span>11</span> 
      <img src="https://images.unsplash.com/photo-1529394187359-bc4d0d8c8321?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f95010cf25b90dfe9ab856abbb6f1b8a&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
 
    <div class="sl-item filter-2 filter-21"> 
      <span>21</span> 
      <img src="https://images.unsplash.com/photo-1529386452117-0eac170f6cd0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b4dfb94f9b42f1a0c1b4132e2ff306d8&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
 
    <div class="sl-item filter-1 filter-12"> 
      <span>12</span> 
      <img src="https://images.unsplash.com/photo-1529335844847-0dd5564a58d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f60f2e76fa62472439d7ec147bfab641&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
 
</div> 
 
<div class="sl-slider slider-nav filtered"> 
 
  <div class="sl-item filter-2 filter-22"> 
      <span>22</span> 
      <img src="https://images.unsplash.com/photo-1529346720291-0c190cc4c804?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c1c62318bf1dfbc9230f8bab8b39f78e&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
 
    <div class="sl-item filter-1 filter-11"> 
      <span>11</span> 
      <img src="https://images.unsplash.com/photo-1529394187359-bc4d0d8c8321?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f95010cf25b90dfe9ab856abbb6f1b8a&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
 
    <div class="sl-item filter-2 filter-21"> 
      <span>21</span> 
      <img src="https://images.unsplash.com/photo-1529386452117-0eac170f6cd0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b4dfb94f9b42f1a0c1b4132e2ff306d8&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
 
    <div class="sl-item filter-1 filter-12"> 
      <span>12</span> 
      <img src="https://images.unsplash.com/photo-1529335844847-0dd5564a58d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f60f2e76fa62472439d7ec147bfab641&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
 
</div>

Принцип работы:

Есть слайдер с набором фото и кнопки с фильтрацией к данному слайдеру.

Изначально отображаются активные слайды, т.е. все для slider 2 ( 21, 22).

При клике на кнопку slider 1 - отображаются все для первого - 11 и 12.

При клике на slider sub gallery 11 - отображается только 11, аналогично и для остальных.

Все, вроде, как работает, но когда отображаются все фото для первого или второго слайдера (11,12 или 21,22) при клике уже на сам превью слайд (из .slider-nav) - смена фото на основном слайдере не срабатывает (.slider-for).

Т.е. перестает работать функционал focusOnSelect:

Вопрос: Как настроить фильтрацию для slick slider подобно фильтрации на isotop чтобы не поломать функционал самого слайдера?

И главный вопрос: есть ли возможность оптимизировать код, что бы не прописывать для каждого else if(whichID === ? Ссылок и фото может быть много (больше десятка). Пробовала через data атрибуты - работает не корректно.

READ ALSO
Как увидеть данные отправленные через jQuery ajax функцию?
jQuery

Как увидеть данные отправленные через jQuery ajax функцию?

Есть jQuery ajax функция

 220
Неправильное сравнение дат в jQuery
jQuery

Неправильное сравнение дат в jQuery

Есть два инпута (datetime-local) - from и to, в который пользователь вводит временной промежуток, например: от (from) 2006

 228
C# передать Label в UserControl
c#

C# передать Label в UserControl

помогите пжл кто чем сможет :) Есть форма авторизации

 229
Алгоритм &ldquo;пузырьковой&rdquo; сортировки
c#

Алгоритм “пузырьковой” сортировки

Это моя попытка реализации, сортировки "пузырьком"Я только учусь программированию, потому не судите строго

 239