메뉴 보이기
Profile
이온디

2018.08.15

슬라이더 플러그인

slick slider 사용방법

조회 수 1829 추천 수 0

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
0Slide 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');
});
Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 출처 날짜 추천 수
공지 [슬라이더 플러그인] 슬라이더 스크립트 4종   2016.07.03 0
공지 [추천사이트] jQuery 추천 사이트 http://api.jquery.com/  2015.06.08 0
132 [기타 플러그인] jquery 더보기 https://nanati.me/demo/demo_js_load.html  15 일 전 0
131 [슬라이더 플러그인] swiper slider   18 일 전 0
130 [플러그인] Cascading Grid Gallery   2018.12.25 0
129 [기타 플러그인] jQuery Select Custom Library   2018.09.17 0
128 [플러그인] Free jQuery image viewer Plugins   2018.08.16 0
[슬라이더 플러그인] slick slider 사용방법 http://kenwheeler.github.io/slick/  2018.08.15 0
126 [슬라이더 플러그인] jquery slider 비교   2018.01.01 0
125 [슬라이더 플러그인] bxslider 옵션 및 참조글   2018.03.02 0
124 [기초활용] [jQuery] each, loop, setInterval 활용   2018.05.28 0
123 [팁] 자바스크립트 키코드, 키 이벤트   2018.05.27 0
122 [기초활용] 모달창 만들기   2017.12.21 0
121 [기초활용] Modal (모달창) https://codepen.io/eond/pen/vpKjRv  2018.05.27 0
120 [팁] [jQuery] 페이징 만들기 http://webcache.googleusercontent.com/se...&gl=kr  2015.08.31 0
119 [기초활용] [jQuery] toggle, if..else , switch https://stackoverflow.com/questions/1157...le_rich_qa  2018.04.27 0
118 [슬라이더 플러그인] 병풍 스크립트   2018.04.19 0
117 [슬라이더 플러그인] carousel slider https://bootsnipp.com/snippets/featured/...r-carousel  2018.04.17 0
116 [화면전환 스크롤] Delighters : CSS Animations on Page Scroll http://www.bestjquery.com/demo/jquery-an...l-effects/  2018.04.13 0
115 [기초활용] Add smooth scrolling to page anchors https://www.w3schools.com/jquery/tryit.a...oothscroll  2018.04.13 0
114 [기타 플러그인] macy.js (masonry 벽돌 레이아웃)   2018.01.15 0