easing
更新日: 2019-12-19
jQueryのanimate()
にイージングを指定します。 イージングライブラリまたはデフォルトのイージングを使って指定します。
* ソースを見る限りuseCSS
がfalse
の場合のみ有効なようです。
- 初期値 :
linear
- type :
string
$('.slider').slick({
easing: 'linear',
useCSS: false,
});
デモ
スライドのアニメーションをlinear
にしています。 "swing"ボタンを押すとアニメーションのイージングが変わります。
1
2
3
linear
swing
JavaScript
$(document).ready(function(){
$('.slider').slick({
easing: 'linear',
useCSS: false,
autoplay: true,
autoplaySpeed: 1000,
speed: 2500,
});
$('.js-linear').on('click', function() {
$('.slider').slick('slickSetOption', {
easing: 'linear',
});
});
$('.js-swing').on('click', function() {
$('.slider').slick('slickSetOption', {
easing: 'swing',
});
});
});
HTML
<div class="slider">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<div class="buttons">
<div class="button js-linear">linear</div>
<div class="button js-swing">swing</div>
</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ドキュメントを翻訳/改変したものです。