Slick Slider 사용법 총정리 | 설치부터 반응형 옵션까지

웹사이트를 만들다 보면 배너, 상품 목록, 후기 영역 등을 슬라이드 형태로 구현해야 하는 경우가 많습니다.

이때 가장 많이 사용되었던 라이브러리 중 하나가 Slick Slider입니다.

최근에는 Swiper가 많이 사용되고 있지만, 유지보수 중인 기존 프로젝트나 PHP 기반 쇼핑몰, 기업 홈페이지에서는 여전히 Slick Slider를 자주 만나게 됩니다.

저 역시 오래된 쇼핑몰 유지보수 작업을 하면서 Slick Slider를 수정하는 일이 생각보다 많았습니다.

특히 관리자 페이지에서 등록한 배너를 자동으로 슬라이드 처리해야 할 때 빠르게 적용할 수 있다는 장점이 있습니다.

Slick Slider가 인기 있었던 이유

Slick Slider가 많은 개발자들에게 선택받았던 이유는 다음과 같습니다.

jQuery 기반이라 적용이 쉽다
반응형(Responsive) 지원
무한 반복 슬라이드 지원
자동 재생 기능 제공
터치 스와이프 지원
다중 슬라이드 출력 가능
다양한 옵션 제공

특히 모바일 대응이 자동으로 가능하다는 점이 큰 장점이었습니다.

옵션

accessibility: 접근성 여부 기본값은 true
autoplay: 자동재생 여부 기본값은 false
autoplaySpeed: 자동재생 간격 기본값은 3000(ms)
arrows: 좌우 화살표 생성 여부 기본 값은 true
appendArrows: 좌우 화살표 변경, 선택자 or $(element)
prevArrow: 좌 화살표 변경, 선택자 or HTML
nextArrow: 우 화살표 변경, 선택자 or HTML
appendDots: 도트 네비 변경, 선택자 or $(element)
dots: 도트 네비 생성여부 기본값은 false
dotsClass: 도트 네비 클래스 변경 기본값은 ‘slick-dots’
customPagin: 사용자지정 페이징, 함수형태로 정의
initialSlide: 처음 보여질 슬라이드 기본값은 0
responsive: 반응형 크기에 따른 재설정이 가능하도록 합니다. 오브젝트 형태로 선언
slidesToShow: 보여질 슬라이드 수 기본값은 1
slidesToScroll: 슬라이드 되어질 슬라이드수 기본값은 1
slidesPerRow: 행수를 정의함 기본값은 1
centerMode: 중앙 보기 기본값은 false
centerPadding: 중앙 보기 에서 padding 값으로 위치 조절 기본값은 “50px”
fade: 모션 사용어부 기본값은 false (slide)
infinite: 무한 루브 설정여부 기본값은 true
speed: 모션 시간을 정의 합니다. 기본값은 3000
waitForAnimate: 애니메이션중 동작을 제한합니다. 기본값은 true
asNavFor: 다른 슬라이더를 참조 함 (class or id)

메소드

.slickCurrentSlide(): 현제 진행중인 인덱스 값을 리턴합니다.
.slickGoTo(index): 진행 시킬 슬라라이더의 인덱스로 이동합니다.
.slickNext(): 다음 슬라이드로 이동합니다.
.slickPrev(): 이전 슬라이드로 진행합니다.
.slickPause(): autoplay 모드일때 진행을 정지 합니다
.slickPlay(): autoplay 를 재기 합니다.
.slickAdd(HTML or DOM object, index, addBefore): 슬라이드 추가
.slickRemove(index, removeBefore): 슬라이드 삭제
.slickGetOption(option : string): 옵션 값을 가져옵니다.
.slickFilter(Selector or Function): 필터를 적용해서 보여줌
.slickUnfilter(index): 적용된 필터링제거
.unslick(): slick를 제거 합니다.

이벤트

init(slick): 슬라이더 초기화 후 호출
reInit(slick): 슬라이더 재초기화 할때마다 호출
afterChange(slick, currentSlide): 슬라이드 후 호출
beforeChange(slick, currentSlide): 슬라이드 전 호출
breakpoint(event, slick, breakpoint): 반응형 브레이크 포인트에 접근되면 호출
swipe(slick, direction): 드래그, 모션 중일때 호출
lazyLoaded(event, slick, image, imageSource): 이미지가 로드되면 호출

홈페이지 이벤트 예제

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

홈페이지 메소드 예제

// Add a slide
$('.your-element').slick('slickAdd',"<div></div>");

// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

// Manually refresh positioning of slick
$('.your-element').slick('setPosition');

basic, autoplay

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
	<title>slick (auto play)</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />	
	<link href="./css/style.css" type="text/css" rel="stylesheet" />
	<link rel="stylesheet" href="../../../../asset/js/libs/slick/slick.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="../../../../asset/js/libs/slick/slick.js"></script>
    <style type="text/css">
        * { margin:0; padding:0;}        
    </style>
    <script>
    $(window).ready(function(){
        
        var slicksGall = $('.gall-list').slick({
          dots: true,
          infinite: true,
          autoplay: true,
          swipeToSlide: true
        });
        
        //slicksGall.slick(  "slickGoTo" , 5 );
            
    })
    </script>
</head>

<body>

<!-- wrap -->

<div class="gallery_view" style="">
	<div class="gallery_center">		
		<div class="gall-list">
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
		</div>	
	</div>	
</div>

<!-- // wrap -->

  

</body>
</html>

custom

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
	<title>slick (auto play)</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />	
	<link href="./css/style.css" type="text/css" rel="stylesheet" />
	<link rel="stylesheet" href="../../../../asset/js/libs/slick/slick.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="../../../../asset/js/libs/slick/slick.js"></script>
    <style type="text/css">
        * { margin:0; padding:0;}        
    </style>
    <script>
    $(window).ready(function(){
        
        var slicksGall = $('.gall-list').slick({
          dots: false,
          infinite: true,       
          swipeToSlide: true
          // slidesToShow: 3,              // 보여지는 슬라이트 수          
          // touchMove:false,              // 드래그 안되고 무브
          // waitForAnimate:false,         // 애니메이션을 적용하는 동안 슬라이드를 앞으로 이동하라는 요청을 무시합니다.
          /*responsive: [                  // 반응형 크기 에따른 적용
            {
              breakpoint: 1024,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: true
              }
            }*/
        });
        
        slicksGall.on('afterChange', function(event, slick, currentSlide, nextSlide){
            slicksGallIndex
            $(".pagination-list li").removeClass("current");
			$(".pagination-list li").eq(currentSlide).addClass("current");        });
        
        // 썸네일  컨트롤 
        var slicksGallIndex;
        $(".pagination-list li").on('click', function(){							
            slicksGallIndex = $(this).index(); 
            //console.log( "click : "+ _index)
            
            slicksGall.slick("slickGoTo", _index);        //= $('.gall-list').slick("slickGoTo", _index);
            $(".pagination-list li").removeClass("current");
            $(this).addClass("current");	
            return false;
        })
        
    
        // btn-reset        
        $(".btn-reset").on("click", function(){
            slicksGallIndex = slicksGall.slick("slickCurrentSlide");
            slicksGall.slick('unslick');
        })

        // btn-reboot 
        $(".btn-reboot").on("click", function(){            
            slicksGall = $('.gall-list').slick({
               dots: false,
               slidesToShow: 3, 
               infinite: true,   
               initialSlide : slicksGallIndex,
               swipeToSlide: true
            })
        })
        
            
    })
    </script>
</head>

<body>

<!-- wrap -->

<div class="gallery_view" style="">
	<div class="gallery_left">		
		<div class="gall-list">
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
			<div class=""><img src="./images/view_01.jpg" width="400" height="535"  alt="" /></div>
		</div>	
        <div class="prev"></div>
		<div class="next"></div>		
	</div>	
	<div class="pagination-right">
	    <ul class="pagination-list">
            <li class="current">
                <a href="#">
                    <img width="83" height="111" src="./images/thumbnail_01.jpg" alt="" />
                    <span class="bg_gray">
                        <span></span>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img width="83" height="111" src="./images/thumbnail_01.jpg" alt="" />
                    <span class="bg_gray">
                        <span></span>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img width="83" height="111" src="./images/thumbnail_01.jpg" alt="" />
                    <span class="bg_gray">
                        <span></span>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img width="83" height="111" src="./images/thumbnail_01.jpg" alt="" />
                    <span class="bg_gray">
                        <span></span>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img width="83" height="111" src="./images/thumbnail_01.jpg" alt="" />
                    <span class="bg_gray">
                        <span></span>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img width="83" height="111" src="./images/thumbnail_01.jpg" alt="" />
                    <span class="bg_gray">
                        <span></span>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img width="83" height="111" src="./images/thumbnail_01.jpg" alt="" />
                    <span class="bg_gray">
                        <span></span>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img width="83" height="111" src="./images/thumbnail_01.jpg" alt="" />
                    <span class="bg_gray">
                        <span></span>
                    </span>
                </a>
            </li>
        </ul>
	</div>
    <div class="btn-box">
	    <button class="btn-reset">reset</button>
	    <button class="btn-reboot">reboot</button>
	</div>
</div>


<!-- // wrap -->

</body>
</html>

실제 유지보수에서 자주 발생하는 문제

슬라이드가 깨지는 경우

대부분 아래 원인입니다.

CSS 로드 순서 문제
jQuery 중복 로드
display:none 상태에서 초기화
이미지 크기 미지정

특히 탭 안에 Slick Slider를 넣어두고 페이지 로딩 시 초기화하면 레이아웃이 깨지는 경우가 많습니다.

이 경우 탭이 열릴 때 refresh를 호출해야 합니다.

$('.slider').slick('setPosition');

Slick Slider와 Swiper 비교

항목	Slick	Swiper
의존성	jQuery 필요	순수 JS
성능	보통	우수
유지보수	중단 상태	활발
사용 난이도	쉬움	보통
신규 프로젝트	비추천	추천

현재 신규 프로젝트라면 Swiper를 사용하는 것이 일반적입니다.

다만 기존 PHP 프로젝트나 오래된 쇼핑몰을 유지보수한다면 Slick Slider를 알아두는 것이 여전히 도움이 됩니다.

마무리

Slick Slider는 최신 라이브러리는 아니지만 아직도 많은 기업 홈페이지와 쇼핑몰에서 사용되고 있습니다.

특히 레거시 PHP 프로젝트를 유지보수하는 개발자라면 Slick Slider 옵션과 자주 발생하는 오류 정도는 알고 있는 것이 좋습니다.

새로운 프로젝트는 Swiper를 추천하지만, 기존 사이트 수정 업무에서는 Slick Slider를 만날 가능성이 매우 높습니다.