slick.js 사용하기 ( 2 )

custom 버튼 적용하기.

- 이전에 기본 사용법  [유용한 라이브러리] - slick.js 사용하기 ( 1 )  

slick.js 사용하기 ( 1 )

을 살펴 봤다.

 

이번엔 버튼 ( arrow / dot  ) 을 커스텀해서 작업하는 방법을 알아보자.

( 실무에선 보통 버튼은 작업된 디자인에 맞게 다시 작업하는게 대부분이다. )

 

 

html

<div class="slick-container">
  <div class="item">slick test 1</div>
  <div class="item">slick test 2</div>
  <div class="item">slick test 3</div>
  <div class="item">slick test 4</div>
  <div class="item">slick test 5</div>
</div>

 

 

javascript

$('.slick-container').slick({
        speed:1000,
        arrows: false,
        dots:true,
        dotsClass:'bn-controller',   // 사용자 css class ( 버튼들의 부모 엘리먼트 클래스를 가르킨다 )
        customPaging: function(slide, i) {
            // console.log( slide.$slider[0] )
            //아래 마크업처럼 적용할 버튼들의 마크업을 대입하면 된다.

            // slick내부에서 슬라이드 개수 만큼 for문으로 생성 ( 슬라이드 개수 만큼 복제된다. )
            return '<div class="slide-banner">' +
                ' <div class="bn-item"> 테스트 버튼'+(i+1)+ '</div>' +
                '</div>'
        }
    });

 

 

slick 제거 

- 반응형 및 모션 작업을 하다보면 슬릭을 화면에서 제거할 일이 종종 생긴다.

 

    var slickInfoObj={
        variableWidth:true,  //width 크기가 서로 다르다는 것을 알림.
        cssEase: 'ease-out',  // css모션을 사용할 경우 easing 타입 지정.
        infinite: true, //무한 슬라이드 
        slidesToShow:6, //한 화면에 보여줄 리스트 개수
        slidesToScroll:1
    }


    //슬릭이 진행중인지 css로 체크
    if( $('.slick-container').hasClass('slick-initialized') ){
        $('.slick-container').slick('unslick');//슬릭해제
    }else{
        $('.slick-container').slick(slickInfoObj);
    }