인셀러, 쇼핑몰 판매자 커뮤니티

본문 바로가기

회원메뉴

 

쇼핑몰 검색

회원로그인

오늘 본 상품

없음

Single Item

1

2

3

4

5

6


$('.single-item').slick();
				

Multiple Items

1

2

3

4

5

6

7

8

9


$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});
				

Responsive Display

1

2

3

4

5

6

7

8


$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
				

Variable Width

200

175

150

300

225

125


$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});
        

Adaptive Height

1

2

Look ma!

3

Check
this out!

4

Woo!


$('.one-time').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});
				

Data Attribute Settings

In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.

1

2

3

4

5

6


<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>
				

Center Mode

1

2

3

4

5

6


$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
				

Lazy Loading


// To use lazy loading, set a data-lazy attribute
// on your img tags and leave off the src

<img data-lazy="http://kenwheeler.github.io/slick/img/lazyfonz1.png"/>

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});
				

Autoplay

1

2

3

4

5

6


$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});
				

Fade


$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
});
				

Add & Remove

1


$('.add-remove').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});
$('.js-add-slide').on('click', function() {
  slideIndex++;
  $('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
});

$('.js-remove-slide').on('click', function() {
  $('.add-remove').slick('slickRemove',slideIndex - 1);
  if (slideIndex !== 0){
    slideIndex--;
  }
});
				

Filtering

1

2

3

4

5

6

7

8

9

10

11

12


$('.filtering').slick({
  slidesToShow: 4,
  slidesToScroll: 4
});

var filtered = false;

$('.js-filter').on('click', function(){
  if (filtered === false) {
    $('.filtering').slick('slickFilter',':even');
    $(this).text('Unfilter Slides');
    filtered = true;
  } else {
    $('.filtering').slick('slickUnfilter');
    $(this).text('Filter Slides');
    filtered = false;
  }
});
				

Destroy

If you really want to be that guy...


$('.your-slider').slick('unslick');
				

Slider Syncing

1

2

3

4

5

1

2

3

4

5


 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});
				

Right to Left

1

2

3

4

5

6


$('.single-item-rtl').slick({
  rtl: true
});
				

Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".


and a whole lot more...

인셀터 파트너
회사소개 서비스이용약관 개인정보취급방침 공지사항 제휴문의 고객문의
  • 고객센터
    Tel : 070 - 4140 - 1302
    Time : am10:00 ~ pm6:00

    고객문의 게시판
    카카오톡 문의 : sopen
  • 입금계좌안내
    신한은행 : 110-450-941860
    하나은행 : 642-910643-16407
    예금주 : 에스오픈(신광태)
  • 사이트명 : 인셀러,     회사명 : 에스오픈
    사업자 등록번호 : 314-07-45623
    통신판매업신고번호 : 2018-대전중구-0441
    주소 : 대전광역시 중구 동서대로 1180, 2F (태평동 414-1)
    전화 : 070-4140-1302
    이메일 : sopen2011@naver.com
    대표&개인정보관리책임자 : 신광태