slick slider 사용방법
첨부파일 https://eond.com/jquery/407062

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');
});
코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 2 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
현재글 [슬라이더 플러그인] slick slider 사용방법 2018/08/15 0
120 [기초활용] [jQuery] each, loop, setInterval 활용 파일 2018/05/28 0
119 [팁] 자바스크립트 키코드, 키 이벤트 2018/05/27 0
118 [기초활용] 모달창 만들기 2017/12/21 0
117 [기초활용] Modal (모달창) 2018/05/27 0
116 [팁] [jQuery] 페이징 만들기 2015/08/31 0
115 [슬라이더 플러그인] 병풍 스크립트 2018/04/19 0
114 [슬라이더 플러그인] carousel slider 2018/04/17 0
113 [화면전환 스크롤] Delighters : CSS Animations on Page Scroll 2018/04/13 0
112 [기초활용] Add smooth scrolling to page anchors 2018/04/13 0
111 [기타 플러그인] macy.js (masonry 벽돌 레이아웃) 파일 2018/01/15 0
110 [슬라이더 플러그인] Camera Slider jquery 2015/11/15 0
109 [기초활용] jquery popup layer 2017/12/21 0
108 [기초활용] jquery 가나다 정렬 2017/12/20 0
107 [기초활용] [jquery] 폰트 사이즈 조절 버튼 페이지 이동시에 변수 초기화 문제 2017/12/20 0
106 [기초활용] 스크롤 내려오면 멈추는 스크립트 2017/11/16 0
105 $.browser.msie undefined 오류 2017/08/23 0
104 [화면전환 스크롤] 패럴렉스 스크롤링 플러그인 2017/03/31 0
103 [기초활용] 비밀글 jQuery style 찾기 2017/03/31 0

해시태그 디렉터리