티스토리 뷰

728x90
반응형

흐음 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);
}





728x90
반응형

'Programming language > javascript' 카테고리의 다른 글

multer 사용법( 파일 업로드 )  (0) 2017.07.19
handlebars( 핸들바 템플릿 ) 기초  (0) 2017.07.14
nvm 설정.  (2) 2017.06.01
http-server 옵션  (0) 2017.06.01
karma 설정  (0) 2017.05.31
댓글