쉽고 가벼운 슬라이더, slick.js를 사용해보자

1. 시작

이번에 외주 작업을 하면서 홈페이지에 슬라이더를 달아야 했습니다. 순수하게 css를 쓰거나 javascript로 직접 짤 수도 있지만, 대 4차 산업혁명 시대. 대부분의 소스들은 이미 온라인에 있는데 굳이 불필요한 노동을 할 필요는 없겠죠.

클라이언트에서 요구한 슬라이더는 협력기관들의 로고가 자동으로 넘어가는 슬라이더여서, 방식은 carousel에 autoplay를 내장으로 지원하는 라이브러리가 필요했습니다. 그래서 carousel 라이브러리 중 쓸만한 것들은 3가지 정도 후보군에 올렸습니다.

첫째는 Owl Carousel입니다.(https://owlcarousel2.github.io/OwlCarousel2/)

Home | Owl Carousel | 2.3.4

좋은 라이브러리고 옵션과 기능도 잘 준비되어 있으며, 문서도 완벽합니다.. 그러나 템플릿의 디자인이 개인적으로 취향이 아니었고, 좌우화살표 기능이 내장되어 있지 않아 탈락하고 말았습니다.

둘째는 Glide.js입니다.(https://glidejs.com/)

Glide.js | A dependency-free JavaScript ES6 slider and carousel

위의 Owl Carousel과 마찬가지로 빠지는 점이 없으며 게다가 좌우화살표도 지원하고 있습니다. 게다가 사용법도 편리하구요. 하지만 ES6 문법의 Javascript인데 만들어야 할 프로젝트는 익스플로러에서도 잘 돌아가야 해서 ES6를 쓸 경우 transpile을 해줘야 합니다. 굳이 그러고 싶진 않아서 이 친구도 탈락입니다.

마지막이 오늘의 주인공 Slick.js입니다.(https://kenwheeler.github.io/slick/)

slick - the last carousel you'll ever need

일단 문서가 완벽합니다. 사이트에 들어가자마자 사용법을 잘 설명해주고 있습니다. 필요한 기능들도 다 있는데다 디자인도 제 스타일인데다 슬라이더 내장으로 '반응형'도 지원하고 있습니다. 더 고민없이 이 친구로 최종결정하게 되었습니다. 

설치는 홈페이지나 github에서 다운받아서 작업대상 폴더에 옮기시면 됩니다. 이제 작업을 시작해볼까요?

2. 설치 및 이용

먼저 슬라이더를 돌릴 div에 .slider라는 클래스를 걸어두고 시작했습니다. 홈페이지에 잘 적혀있는만큼 아주 직관적으로 쉽게 만들 수 있었습니다. 그리고 아래와 같은 javascript 코드를 만들어서 적용하면 끝입니다.

$(document).ready(function(){
    $('.slider').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
}

짧게 설명드리면 먼저 한 턴에 4장의 슬라이드에 보이고, 다음 턴으로 넘어가면 1장씩 바뀝니다. 이게 slidesToShow와 slidesToScroll의 의미입니다. 자동전환을 위해 autoplay를 true로 바꿨고, 2초에 한번 넘어가도록 autoplaySpeed는 2000ms로 맞췄습니다. 반응형의 경우 1024, 600, 480의 3구간으로 잘라 각각 한턴에 3장씩, 2장씩, 1장씩 보이도록 reponsive 부분에서 조정했구요.

이렇게 하면 순식간에 자동재생이 되는 슬라이더를 설치할 수가 있습니다. 보다 자세한 설명이나 예시는 slick.js 홈페이지를 참고해주시고 저는 이만 글을 마치도록 하겠습니다.

읽어주셔서 감사합니다. Adieu