WEB 웹팁 디자인팁 폰트 컬러 UI/UX 모바일UI Widget 디자인소스 기획팁 웹서비스 회사복지 스타트업 회사후기 메모/서식 퍼블팁 추천사이트 HTML•CSS 자바스크립트 jQuery React 앵귤러JS Node.js Codepen 개발팁 PHP 한글코딩 인터뷰 안드로이드 오픈API 파이썬 Flutter 서버관리팁

slick slider 사용방법

2018년 08월 15일

example

jQuery(function ($) {
   $('.single-item').slick({
      dots:true
                });
});

Setting	Default	Description	Remarks
accessibility	true	Enables tabbing and arrow key navigation
adaptiveHeight	false	Enables adaptive height for single slide horizontal carousels.	jQuery 버전에 따라서인지, 카페24에서 삽입시 오류가 있음.
autoplay	false	Enables Autoplay
autoplaySpeed	3000	Autoplay Speed in milliseconds
arrows	true	Prev/Next Arrows
asNavFor	null	Set the slider to be the navigation of other slider (Class or ID Name)
appendArrows	$(element)	Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
appendDots	$(element)	Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
prevArrow	<button type="button" class="slick-prev">Previous</button>	Allows you to select a node or customize the HTML for the "Previous" arrow.
nextArrow	<button type="button" class="slick-next">Next</button>	Allows you to select a node or customize the HTML for the "Next" arrow.
centerMode	false	Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding	'50px'	Side padding when in center mode (px or %)
cssEase	'ease'	CSS3 Animation Easing
customPaging	n/a	Custom paging templates. See source for use example.
dots	false	Show dot indicators
dotsClass	'slick-dots'	Class for slide indicator dots container
draggable	true	Enable mouse dragging
fade	false	Enable fade
focusOnSelect	false	Enable focus on selected element (click)
easing	'linear'	Add easing for jQuery animate. Use with easing libraries or default easing methods
edgeFriction	0.15	Resistance when swiping edges of non-infinite carousels
infinite	true	Infinite loop sliding
initialSlide	0	Slide to start on
lazyLoad	'ondemand'	Set lazy loading technique. Accepts 'ondemand' or 'progressive'
mobileFirst	false	Responsive settings use mobile first calculation

custom arrow

<button type="button" class="slick-prev">asdfsdf</button>

jQuery(function ($) {
   $('.single-item').slick({
      // adaptiveHeight: true, // 오류 발생
      dots:true,
      prevArrow:$('.slick-prev')
                }).css('margin-top','80px');
   $('.slick-track').css('height','400');
});

#slick

이온디 유한회사 | 사업자번호 : 405-86-01061 | 통신판매신고 : 제2018-대구동구-0767호 [사업자확인]
주소. 대구광역시 동구 안심로16길 71, 5층 502호 / 전화. 0507-1433-0311

slick slider 사용방법

주간 인기 검색어 상세보기

2024년 11월 18일 ~ 11월 24일