Methods
更新日: 2019-12-19
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ドキュメントを翻訳/改変したものです。