Methods

作成日: 2018-09-25

slick1.4では、メソッドはslickインスタンス自体から呼び出されます。

// スライドを追加
$('.your-element').slick('slickAdd',"<div></div>");

// 現在のスライドを取得
var currentSlide = $('.your-element').slick('slickCurrentSlide');

新しい構文では、内部のslickメソッドを呼び出すこともできます。

// 手動でslickの位置を更新
$('.your-element').slick('setPosition');

デモ

ボタンを押すと割り当てられたメソッドを実行します。
"追加"ボタンを押すと「3」のスライドを追加します。
"スライド番号"ボタンを押すと現在のスライド番号を取得して表示します。
"ドット数"ボタンを押すと、ナビゲーションドットの数を取得して表示します。

1

2

追加
スライド番号
ドット数
JavaScript
$(document).ready(function(){
  $('.slider').slick({
    slidesToShow: 3,
    dots: true,
  });
});

$('.js-add').on('click', function() {
  // スライドを追加
  $('.slider').slick('slickAdd',"<p>3</p>");
});

$('.js-slide').on('click', function() {
  // 現在のスライド番号を取得
  var currentSlide = $('.slider').slick('slickCurrentSlide');
  $('.result').text('現在の左端のスライドは' + currentSlide + 'です。');
});

$('.js-fade').on('click', function() {
  // 内部関数を利用
  // 現在のナビゲーションドットの数を取得
  var currentDotsCnt = $('.slider').slick('getDotCount') + 1;
  $('.result').text('現在のナビゲーションドットの数は' + currentDotsCnt + 'です。');
});

HTML
<div class="slider">
  <p>1</p>
  <p>2</p>
</div>
<div class="buttons">
  <div class="button js-add">追加</div>
  <div class="button js-slide">スライド番号</div>
  <div class="button js-dotcnt">ドット数</div>
</div>
<div class="result"></div>
CSS
 .slick-prev:before,
 .slick-next:before {
   color: #000 !important;
 }

 .slider 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;
 }

© 2017 Ken Wheeler Licensed under the MIT license

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