reInit
更新日: 2019-12-19
slickを(再)初期化するたびに発生します。
- パラメータ :
event
、slick
$('.slider').on('reInit', function(event, slick){
...
});
デモ
"リロード"ボタンを押すイベントが発生し、"リロードしました。"と表示します。
1
2
リロード
JavaScript
$(document).ready(function(){
$('.slider').on('reInit', function(event, slick){
$('.result').text('reInit : リロードしました。');
});
$('.slider').slick();
$('.js-reinit').on('click', function() {
$('.slider').slick('slickSetOption', {}, true);
});
});
HTML
<div class="slider">
<p>1</p>
<p>2</p>
</div>
<div class="buttons">
<div class="button js-reinit">リロード</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ドキュメントを翻訳/改変したものです。