Slick 슬라이드 카테고리 필터 기능 (Slick slide category filter)

slick.js

 

See the Pen Slick 슬라이드 필터 (Slick slider filter) by kimyangsun (@kimyangsun) on CodePen.

 

Slick 슬라이드 카테고리 필터 기능 (Slick slide category filter)

코드펜 예제입니다.

html 에서 data-filter 값을 넣어주고 자바스크립트에서 그걸 이용해서 slick filter를 적용해줍니다.

스크립트 코드를 보면 바로 이해 가능하실거에요 ㅎ.ㅎ

아래는 js 코드 한번 더 첨부합니다.

 

$(function() {
 
  $(".slider").slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: true,
  });
  
  $(".filter li").on('click', function(){
    let filter = $(this).data('filter');
    $(".slider").slick('slickUnfilter');
    if (filter == 'all') return;
    $(".slider").slick('slickFilter', `.${filter}`);
  })
  
});