[PlugIn] slick slider

slick

slick

slick_github

slick 예제

#Settings

settings	Type	Default	Description
accessibility	boolean	true	탭 및 화살표 키를 사용한다. autoplay: true일 경우, 슬라이드 변경 후 브라우저 포커스를 현재 슬라이드(또는 여러개의 slideToShow 인 경우, 현재 슬라이드의 첫번째)로 설정한다. 또한 완벽한 접근성 준수를 위해 focusOnChange를 활성화한다.
adaptiveHeigh	boolean	false	슬라이더 높이를 현재 슬라이드에 맞춘다.
appendArrows	string	$(element)	방향 화살표 변경.(Selector, htmlString, Array, Element, jQuery object)
appendDots	string	$(element)	도트 위치 변경.(Selector, htmlString, Array, Element, jQuery object)
arrows	boolean	true	Next / Prev 화살표 사용.
asNavFor	string	$(element)	여러 슬라이드 동기화 가능. 슬라이드 2개이상 쓸 때 사용.
autoplay	boolean	false	자동 슬라이드 사용.
autoplaySpeed	int	3000	자동 슬라이드 속도.
centerMode	boolean	false	prev / next 시에 중앙슬라이드보기를 활성화한다. slidesToShow를 쓸 때 홀수로 사용해야 centerMode가 적용된다.
centerpadding	string	'50px'	중앙모드(centerMode)일 때, 양 옆 padding(px 또는 %)
cssEase	string	'ease'	CSS3 easing
customPaging	function	n/a	사용자 지정 paging templates 슬라이드 개수를 알 수 있다. dots: true 가 필요.
dots	boolean	false	현재 슬라이드 위치 도트. 도트 네비 생성여부.
dotsClass	string	'slick-dots'	도트 네비 클래스 변경.
draggable	boolean	true	데스크탑 드래그 가능.
easing	string	'linear'	jQuery animate easing 사용.
edgeFriction	integer	0.15	무한 슬라이드 가장자리를 넘길 때 저항값 지정.
fade	boolean	false	fade 사용 여부.
focusOnSelect	boolean	false	선택한 요소에 focus 여부. (click) 하나의 슬라이드를 클릭하면 그 슬라이드로 이동한다(focus)
focusOnChange	boolean	false	클릭하여 선택한 슬라이드에 초점을 둔다.
infinite	boolean	false	무한 루트.
initialSlide	integer	0	처음 보여질 슬라이드.
lazyLoad	string	'ondemand'	'ondemand' 또는 'progressive'를 사용. 지연 로딩 방법을 지정. 'ondemand'는 슬라이드 하자마자 이미지를 로드, 'progressive'는 페이지가 로드된 후 숨겨진 이미지를 로드. 'ondemand'는 슬라이드 넘긴 후에 이미지가 로드 / 'progressive'는 평소 보던 슬라이드이다. 개발도구에서 확인.
mobileFirst	boolean	false	responsive settings에서 모바일 사이즈를 설정하여 mobile일 때 사용가능하게 한다. breakpoint를 기준으로 mobileFirst: false은 창 너비(설정에 따라 슬라이드 너비)가 breakpoint보다 작은지 여부를 결정, mobileFirst: true는 창 너비가 breakpoint보다 큰지 여부를 결정.
nextArrow	string (html | jQuery selector) | object (DOM node | jQuery object)	<button type="button" class="slick-next">Next</button>	Next 화살표를 node나 HTML로 변경.
pauseOnDotsHover	boolean	false	dots에 hover일 때, autoplay 는 정지.
pauseOnFocus	boolean	true	슬라이드가 포커스 될 때, autoplay 정지.
pauseOnHover	boolean	true	autoplay 를 hover 할 때, 정지.
prevArrow	string (html | jQuery selector) | object (DOM node | jQuery object)	<button type="button" class="slick-prev">Previous</button>	Prev 화살표는 node나 HTML로 변경.
respondTo	string	'window'	breakpoint의 기준으로 객체를 지정.
responsive	object	none	반응형 크기에 따른 재설정이 가능. breakpoint로 화면 크기를 설정해주며, slick을 사용하지 않으면 마지막에 unslick 해준다.
rows	int	1	slidePerRow를 넣어, 행에 슬라이드 수를 정한다.
rtl	boolean	false	슬라이더의 방향을 오른쪽에서 왼쪽으로 변경.
slide	string	''	슬라이드로 사용할 요소에 대한 쿼리를 지정.
slidesPerRow	int	1	각 행에 슬라이드가 추가 여부.
slidesToScroll	int	1	방향키를 누르면 숫자만큼 슬라이드가 넘겨진다. slidesToshow 에서 보여지는 슬라이드 숫자 정해야 한다.
slidesToShow	int	1	한 화면에 숫자에 따라 슬라이드 수가 보여진다.
speed	int	300	움직이는 속도.
swipe	boolean	true	슬라이드 넘길 것인지 여부.
swipeToSlide	boolean	false	slideToScroll int에 따라 swipe. true면 하나씩 swipe.
touchMove	boolean	true	터치에 따라 슬라이드가 움직인다.
touchThreshold	int	5	swipe하여 슬라이드를 이동할 때 슬라이드 너비를 1/5이상 스와이프하여 슬라이드를 전환.
useCSS	boolean	true	활성화 / 비활성화 CSS Transitions.
useTransform	boolean	true	활성화 / 비활성화 CSS Transforms.
variableWidth	boolean	false	슬라이드 너비 자동계산을 비활성화. true일 경우, 활성화되어 자동으로 맞춘 슬라이드 너비가 해제된다.
vertical	boolean	false	슬라이드를 수직 방향으로 넘긴다.
verticalWidth	boolean	false	수평인 스와이프 방향을 변경. true면 세로로 변경.
waitForAnimate	boolean	true	애니메이션 중 슬라이드 이동 요청 무시.
zIndex	number	1000	슬라이드의 z-index를 설정할 수 있다. IE9이하에서 유용.

 

#Events

• slick 1.4에서는 콜백 메소드가 더 이상 사용되지 않으며 이벤트로 대체되었다. 아래와 같이 초기화전에 사용한다.

// 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);
});

 

Event	Prarams(매개 변수)	Description
afterChange	event, slick, currentSlide	슬라이드 이동 후 이벤트 시작.
beforeChange	event, slick, currentSlide, nextSlide	슬라이드 이동 전 이벤트 시작.
breakpoint	event, slick, breakpoint	반응형 설정 중에 breakpoint에 도달하면 발생하는 이벤트. breakpoint에서 지정한 너비에 해당 이벤트가 발생한다.
destroy	event, slick	슬라이드가 삭제(destoryed)되거나 풀릴 때(unslicked) 발생하는 이벤트.
edge	event, slick, direction	non-infinite(무한대) 일 때, 가장자리가 오버 스크롤 될 때 발생. 마지막 슬라이드에서 원하는 이벤트를 발생시킨다.
init	event, slick	slick이 초기화 될 때 발생. 슬라이더가 초기화되기 전에 이벤트를 정의해야 한다.
reInit	event, slick	초기화될 때마다 slick이 발생.
setPosition	event, slick	위치가 다시 계산 될때마다 발생. 슬라이드가 초기화될 때마다 슬라이드 재 초기화 이벤트가 발생.
swipe	event, slick, direction	swipe하거나 드래그 한 후 이벤트 발생. 슬라이드를 swipe하면 어느방향으로 이동했는지 알 수 있다.
lazyLoaded	event, slick, image, imageSource	이미지가 느리게 로드된 후 발생. lazyLoad 세팅을 발생시킬 때 사용가능. 현재 슬라이드의 이미지 소스를 알 수 있다.
laztLoadError	event, slick, image, imageSource	이미지 로드에 실패한 후 이벤트가 발생.

 

 

#Methods

slick 1.4에서는 slick instance 자체에서 메서드가 호출된다.

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

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

 

새로운 구문(syntax)를 통해 slick 내부의 메소드를 호출 할 수 있다.

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

Method	Argument	Description
slick	options: object	초기화 slick
unslick		삭제 slick
slickNext		다음 슬라이드를 명시
slickPrev		이전 슬라이드를 명시
slickPause		자동플레이 정지
slickPlay		자동플레이 시작(autoplay option이 true로 설정되어야 함.)
slickGoTo	index: int, dotAnimation: bool	index로 지정된 슬라이드로 이동. 두번째 매개변수에 true를 지정할 경우, 이동 애니메이션을 스킵한다.
slickCurrentSlide		현재 슬라이드 index의 값을 알려준다.
slickAdd	element: html or DOM object, index: int, addBefore: bool	슬라이드를 추가한다. index가 지정되어 있는 경우, 그 인덱스를 추가한다. addBefore가 지정되어있는 경우, index로 지정된 슬라이드 앞에 추가. index가 지정되어 있지 않은 경우, 끝 또는 addBefore가 지정되어 있으면 앞에추가한다. HTML문자열을 받는다.
slickRemove	index: int, removeBefore: bool	index로 지정된 슬라이드를 제거. removeBefore에 true가 지정되어 있는 경우, index로 지정된 슬라이드 이전 슬라이드를 제거한다. index가 지정되어 있지 않은 경우 첫 번째 슬라이드를 삭제한다. removeBefore false가 지정되어 있는 경우, index로 지정된 슬라이드를 제거한다. index가 지정되어 있지 않으면 끝에 슬라이드를 제거한다.
slickFilter	filter: selector or function	jQuery의 .filter구문을 사용하여 필터링한다.
slickUnfilter		적용된 .filter를 해체.
slickGetOption	option: string(option name)	지정된 option값을 가져온다.
slickSetOption	option을 변경하고 refresh는 항상 boolean을 받고 UI를 업데이트한다.
option, value, refresh	지정된 settingOption의 값(value)을 변경. refresh는 선택적이다.
'responsive', [{ breakpoint: n, settings: {}, ... }], refresh	설정해놓은 responsive options을 변화시키거나 추가한다.
{option: value, option: value, ...}, refresh	여러 옵션을 해당 값으로 변경.

Example

초기화 ::

$(element).slick({
  dots: true,
  speed: 500
});

speed를 변화시킨다.

$(element).slick('slickSetOption', 'speed', 5000, true);

slick을 해체한다.

$(element).slick('unslick');

 

 

#Sass Variables

• slick은 슬라이드에서 사용되는 이미지와 아이콘 등을 정의한 Sass 변수가 포함되어 있다.

Variable	Type	Dafault	Description
$slick-font-path	string	"./fonts/"	slick icon font에 대한 위치 경로
$slick-font-family	string	"slick"	slick icon font font-family
$slick-loader-path	string	"./"	로딩 이미지 경로.
$slick-arrow-color	color	white	좌우 화살표 아이콘 컬러.
$slick-dot-color	color	black	네비게이션 도트 컬러.
$slick-dot-color-acitve	color	$slick-dot-color	현재 네비게이션 도트 컬러.
$slick-prev-character	string	'\2190'	이전 화살표 아이콘의 유니코드.
$slick-next-character	string	'\2192'	다음 화살표 아이콘의 유니코드.
$slick-dot-character	string	'\2022'	네비게이션 도트 아이콘의 유니코드.
$slick-dot-size	pixels	6px	네비게이션 도트의 크기.

Browser suport(브라우저 지원)

slick은 Chrome, Firefox 및 Safari와 같은 다른 최신 브라우저 외에도 IE8 + 에서 작동한다.