slick.js ( 슬라이드 / 캐러셀 라이브러리 )

흐음 slick 라이브러리는 좀 유명한가보다... 

최근에 지인을 통해 알게 되었다.

머 커스터마이징이 어려워서 대부분을 만들어서 쓰곤 했는데...

살펴보니 빠른 슬라이드 작업을 위해선 꽤 괜찮은 ~ 

아니 내가 만든거 보다 백배 좋은 라이브러리라고 판단된다...

언능 언능 써보자~

http://kenwheeler.github.io/slick/

간단 사용법

javascript

$('.multiple-items').slick({
  infinite: true, //양방향 무한 모션
  speed:300, // 슬라이드 스피드
  autoplay: true, //자동플레이 유무( false시 자동플레이 안됨 )
  autoplaySpeed:4000, // 자동플레이 스피드
  slidesToShow: 3, //한 화면에 보여줄 아이템수
  slidesToScroll: 3 // 한번에 슬라이드 시킬 아이템 개수
  arrows: false, //좌우 화살 버튼 노출 여부 ( false 시 안보임 )
});

html

<div class="multiple-items">
  <div>item1</div>
  <div>item2</div>
  <div>item3</div>
......중략......
<div>

단순 FadeInOut 으로만 사용시

$('.multiple-items').slick({
  dots: true, // 하단 paging버튼 노출 여부
  infinite: true, // 양방향 무한 모션
  speed: 500, // 모션 스피드
  fade: true, //페이드모션 실행 여부
  cssEase: 'linear' //css easing 모션 함수
});

제공되는 페이징 버튼이 아니고 custom 버튼형식으로 대체 (배너버튼 등)

$('.multiple-items').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">' +
      '<img src="이미지경로'+(i+1)+'.jpg" alt="">'+
      '</div>' +
      '</div>'
  }
});

custom pasing 버튼 클릭시

$('.bn-controller>li').on('click', function (e) {
  $('.multiple-items').slick("slickGoTo", $(e.currentTarget).index() );
});

슬릭 해제

- 반응형 작업 및 모션 작업을 하다보면 슬릭을 해제 및 재설정 경우가 생긴다.

var slickInfoObj={
    variableWidth:true,  //width 크기가 서로 다르다는 것을 알림.
    dots: false,
    swipe:false,
    cssEase: 'ease-out',
    infinite: true,
    slidesToShow:6, //한 화면에 보여줄 리스트 개수
    slidesToScroll:1
  }


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