Slick 라이브러리

Slick 특징

• Siwper보다 옵션 종류는 적지만 간단하다는 장점
• 스와이프를 기본으로 지원
• 슬라이드를 동적으로 추가/제거하는 기능, 필터링으로 조건을 달아 슬라이드별로 숨기고 보이는 기능 등을 구현할 때 유용하다.
• 🖱 Slick 이동

📌 Slick 사용방법

Slick 설치 방법

1) CDN을 이용한 방법

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- JS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Slick 옵션 설정

1. direction

$('.slider-items').slick({
	vertical: true,             // 세로 방향 여부 (기본 값: false)           
  verticalSwiping: true,      // 세로 방향 스와이프 여부 (기본 값: false)
})

2. loop

$('.slider-items').slick({
  infinite: true,             //무한반복 (기본값 true)
  autoplay: true,             //자동 재생 (기본값 false)
  autoplaySpeed: 2000,        //자동 재생 딜레이 시간(ms) 
})

3. slide

$('.slider-items').slick({
  slidesToShow: 4,            //한번에 보여줄 슬라이드 아이템 개수
  slidesToScroll: 4,          //한번에 넘길 슬라이드 아이템 개수
  slidesPerRow: 1,            //보여질 행의 수 (한 줄, 두 줄 ... )   
})

4. rows

$('.slider-items').slick({
 rows: 1,                    //이미지를 몇 줄로 표시할지 개수
})

5. navigation

$('.slider-items').slick({
 dots: false,                //슬라이더 아래 도트 네비 버튼 표시 여부 (기본값 false)
 appendDots: $('selector'),  //네비게이션 버튼 변경
 dotsClass: 'custom-dots',   //네비게이션 버튼 클래스 변경
 draggable: false,           //슬라이드 드래그 가능여부 (기본값 true)
 arrows: true,               //이전 다음 버튼 표시 여부 (기본값 true)
})

6. hover

$('.slider-items').slick({
  pauseOnFocus: true,         //마우스 클릭 시 슬라이드 멈춤 (기본값 true)
  pauseOnHover: true,         //마우스 호버 시 슬라이드 멈춤 (기본값 true)
  pauseOnDotsHover: true,     //네비게이션버튼 호버 시 슬라이드 멈춤 (기본값 false)
})

7. arrow

$('.slider-items').slick({
  appendArrows: $('#arrows'), //좌우 화살표 변경
  prevArrow: $('#prevArrow'), //이전 화살표만 변경
  nextArrow: $('#nextArrow'), //다음 화살표만 변경
})

추가옵션

$('.slider-items').slick({
  variableWidth: true,        //사진마다 width의 크기가 다른가? (기본값 false)
  accessibility: true,        //접근성 여부 (기본값 false)
  initialSlide: 1,            //처음 보여질 슬라이드 번호 (기본값 0)
  centerMode: true,           //중앙에 슬라이드가 보여지는 모드 (기본값 false)
  centerPadding: '70px',      //중앙에 슬라이드가 보여지는 모드에서 패딩 값
  fade: true,                 //크로스페이드 모션 사용 여부 (기본값 false)
  speed: 2000,                //모션 시간
  waitForAnimate: true,       //애니메이션 중에는 동작을 제한함 (기본값 true)
})

반응형 설정

  // ▼ 반응형 브레이크포인트 옵션
  // breakpoint: 숫자를 제작자의 환경에 맞게 조정함 ex) breakpoint: 1280
  // 각 브레이크포인트 내에 settings 안에 위의 모든 옵션을 다르게 적용할 수 있음
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

📌 Slick 장단점

Slick의 장점

• 다양한 옵션과 효과를 제공하여, 다양한 슬라이드쇼 구현 가능
• 반응형 웹 디자인을 지원하므로, 모바일 환경에서도 이용 가능
• 마크업 코드와 스타일 코드를 분리하여 작성할 수 있어, 유지보수가 용이
• 유연하게 커스터마이징 가능

Slick의 단점

• 필요하지 않은 기능이 있어 가볍지 않을 수 있다
• 다른 프레임워크와 통합하기 어려울 수 있음
• 기능이 많아 복잡할 수 있음

Swiper와 거의 비슷한 느낌