slick - にほんご。

Examples

更新日: 2019-12-19

単一表示

1

2

3

4

5

6

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

実際のソース

JavaScript
$(document).ready(function(){
  $('.single-item').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  });
});
HTML
<div class="single-item">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.single-item p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

複数表示

1

2

3

4

5

6

7

8

9

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

実際のソース

JavaScript
$(document).ready(function(){
  $('.multiple-items').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});
HTML
<div class="multiple-items">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.multiple-items p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

レスポンシブ

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
      }
    }
    // 指定したブレイクポイントでslickを無効化するには
    // オブジェクトの代わりに settings: "unslick" を指定します。
  ]
});

実際のソース

JavaScript
$(document).ready(function(){
  $('.responsive').slick({
    dots: true,
    infinite: false,
    speed: 500,
    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
      }
    }]
  });
});
HTML
<div class="responsive">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.responsive p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

可変幅

200

175

150

300

225

125

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

実際のソース

JavaScript
$(document).ready(function(){
  $('.variable-width').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true
  });
});
HTML
<div class="variable-width">
  <p style="width:200px">200</p>
  <p style="width:175px">175</p>
  <p style="width:150px">150</p>
  <p style="width:300px">300</p>
  <p style="width:225px">225</p>
  <p style="width:125px">125</p>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.variable-width p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

可変高

1

2

Look ma!

3

Check
this out!

4

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

実際のソース

JavaScript
$(document).ready(function(){
  $('.adaptive-height').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    adaptiveHeight: true
  });
});
HTML
<div class="adaptive-height">
  <div>
    <p>1</p>
  </div>
  <div>
    <p>2</p>
    <div>Look ma!</div>
  </div>
  <div>
    <p>3</p>
    <div>Check
      <br>this out!</div>
  </div>
  <div>
    <p>4</p>
    <div>Woo!</div>
  </div>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.adaptive-height p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

.adaptive-height div > div {
  margin-bottom: 20px;
  text-align: center;
}

data属性による設定

slick 1.5ではdata-slick属性を使って設定を追加することができるようになりました。 ただし、slickを初期化するために通常通り$(element).slick()を呼び出さなければなりません。

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>

実際のソース

JavaScript
$(document).ready(function(){
  $('.data-attribute-settings').slick();
});
HTML
<div class="data-attribute-settings" data-slick='{"slidesToShow":4,"slidesToScroll":4}'>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.data-attribute-settings p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

センターモード

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

実際のソース

JavaScript
$(document).ready(function(){
  $('.center-mode').slick({
    centerMode: true,
    infinite: true,
    centerPadding: '60px',
    slidesToShow: 3,
    speed: 500,
    responsive: [{
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    }, {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }]
  });
});
HTML
<div class="center-mode">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.center-mode p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
  opacity: 0.4;
  transition: all 300ms ease;
}

.center-mode p.slick-center {
  color: #f50057;
  opacity: 1;
  transform: scale(1.16);
}

遅延読み込み

// 画像の遅延読み込みを使うには、
// imgタグにdata-lazy属性を設定し、src属性を削除します。

<img data-lazy="img/lazyfonz1.png"/>

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

実際のソース

JavaScript
$(document).ready(function(){
  $('.lazy-loading').slick({
    lazyLoad: 'ondemand',
    slidesToShow: 3,
    slidesToScroll: 1,
    speed: 500
  });
});
HTML
<div class="lazy-loading">
  <div class="image">
    <img data-lazy="./img/1.jpg">
  </div>
  <div class="image">
    <img data-lazy="./img/2.jpg">
  </div>
  <div class="image">
    <img data-lazy="./img/3.jpg">
  </div>
  <div class="image">
    <img data-lazy="./img/4.jpg">
  </div>
</div>
CSS
.lazy-loading img {
  width: 240px;
}

.lazy-loading .image {
  margin: 10px;
}

自動再生

1

2

3

4

5

6

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

実際のソース

JavaScript
$(document).ready(function(){
  $('.autoplay').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000
  });
});
HTML
<div class="autoplay">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.autoplay p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

フェード

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

実際のソース

JavaScript
$(document).ready(function(){
  $('.fade').slick({
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    slide: 'div',
    cssEase: 'linear'
  });
});
HTML
<div class="fade">
  <div class="image">
    <img data-lazy="./img/1.jpg">
  </div>
  <div class="image">
    <img data-lazy="./img/2.jpg">
  </div>
  <div class="image">
    <img data-lazy="./img/3.jpg">
  </div>
</div>
CSS
.fade .image {
  padding: 10px;
}

.fade img {
  width: 100%;
}

追加と削除

1

Slide追加
Slide削除
$('.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--;
  }
});

実際のソース

JavaScript
$(document).ready(function(){
  $('.add-and-remove').slick({
    dots: true,
    slidesToShow: 3,
    speed: 500,
    slidesToScroll: 3
  });
  var slideIndex = 1;
  $('.js-add-slide').on('click', function() {
    slideIndex++;
    $('.add-and-remove').slick('slickAdd','<p>' + slideIndex + '</p>');
  });

  $('.js-remove-slide').on('click', function() {
    $('.add-and-remove').slick('slickRemove',slideIndex - 1);
    if (slideIndex !== 0){
      slideIndex--;
    }
  });
});
HTML
<div class="add-and-remove">
  <p>1</p>
</div>
<div class="buttons">
  <div class="button js-add-slide">Slide追加</div>
  <div class="button js-remove-slide">Slide削除</div>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.add-and-remove p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

.buttons {
  display: flex;
  justify-content: center;
}

.buttons .button {
  margin: 8px;
  border: 1px solid #000;
  color: #000;
  padding: 8px;
  text-align: center;
  width: 6em;
  transition: all 300ms ease;
}

.buttons .button:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  transition: all 300ms ease;
}

フィルタリング

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

実際のソース

JavaScript
$(document).ready(function(){
  $('.filtering').slick({
    dots: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 4
  });
  var filtered = false;
  $('.js-filter').on('click', function() {
    if (filtered === false) {
      $('.filtering').slick('slickFilter',':even');
      $(this).text('フィルタ解除');
      filtered = true;
    } else {
      $('.filtering').slick('slickUnfilter');
      $(this).text('フィルタリング');
      filtered = false;
    }
  });
});
HTML
<div class="filtering">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>
<div class="buttons">
  <div class="button js-filter">フィルタリング</div>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.filtering p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

.buttons {
  display: flex;
  justify-content: center;
}

.buttons .button {
  margin: 8px;
  border: 1px solid #000;
  color: #000;
  padding: 8px;
  text-align: center;
  width: 8em;
  transition: all 300ms ease;
}

.buttons .button:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  transition: all 300ms ease;
}

slickの削除

本当に削除したいなら...

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

スライダの同期

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

実際のソース

JavaScript
$(document).ready(function(){
  $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 500,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });
  $('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    speed: 500,
    asNavFor: '.slider-for',
    dots: true,
    centerMode: true,
    focusOnSelect: true,
    slide: 'p'
  });
});
HTML
<div class="slider-for">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
</div>
<div class="slider-nav">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.slider-for p,
.slider-nav p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

右から左へ

1

2

3

4

5

6

$('.single-item-rtl').slick({
  rtl: true
});
* スライダのHTMLタグまたはその親要素は、dir属性にrtlを指定する必要があります。

実際のソース

JavaScript
$(document).ready(function(){
  $('.right-to-left').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    rtl: true
  });
});
HTML
<div class="right-to-left" dir="rtl">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>
CSS
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.autoplay p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}


© 2017 Ken Wheeler Licensed under the MIT license

このコンテンツはKen Wheeler(kenwheeler)によるslickドキュメントを翻訳/改変したものです。