プラグインのスライダーの動きをカスタマイズする

プラグインのスライダーの動きをCSSで変更する機会がありましたので、やり方をメモしておきます。
今回使用するプラグインはslick.jsとswiper.jsですが、スライド時に要素にclassが付与されるプラグインであればだいたい大丈夫と思います。

サンプルコード

今回は以下のようにスライド画像が横に並ぶタイプのスライダーが対象になります。
slick.jsのカスタマイズ設定前のデモページ
swiper.jsのカスタマイズ設定前のデモページ

それぞれ以下のように設定しています。

slick.js

HTML

<div class="slick">
	<div class="slick-item"><img src="../img/img01.jpg"></div>
	<div class="slick-item"><img src="../img/img02.jpg"></div>
	<div class="slick-item"><img src="../img/img03.jpg"></div>
	<div class="slick-item"><img src="../img/img04.jpg"></div>
	<div class="slick-item"><img src="../img/img05.jpg"></div>
	<div class="slick-item"><img src="../img/img06.jpg"></div>
	<div class="slick-item"><img src="../img/img07.jpg"></div>
	<div class="slick-item"><img src="../img/img08.jpg"></div>
	<div class="slick-item"><img src="../img/img09.jpg"></div>
	<div class="slick-item"><img src="../img/img10.jpg"></div>
</div>

JavaScript

$(function() {
	$('.slick').slick({
		speed: 500,
		slidesToShow: 1,
		slidesToScroll: 1,
		centerMode: true,
		centerPadding: '0px',
		variableWidth: true
	});
});

swiper.js

HTML

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="../img/img01.jpg"></div>
		<div class="swiper-slide"><img src="../img/img02.jpg"></div>
		<div class="swiper-slide"><img src="../img/img03.jpg"></div>
		<div class="swiper-slide"><img src="../img/img04.jpg"></div>
		<div class="swiper-slide"><img src="../img/img05.jpg"></div>
		<div class="swiper-slide"><img src="../img/img06.jpg"></div>
		<div class="swiper-slide"><img src="../img/img07.jpg"></div>
		<div class="swiper-slide"><img src="../img/img08.jpg"></div>
		<div class="swiper-slide"><img src="../img/img09.jpg"></div>
		<div class="swiper-slide"><img src="../img/img10.jpg"></div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

JavaScript

$(function() {
	var mySwiper = new Swiper('.swiper-container', {
		loop: true,
		nextButton: '.swiper-button-next',
		prevButton: '.swiper-button-prev',
		spaceBetween: 30
	});
});

特に設定しない場合は通常のスライドになるので、少し動きを付けてみます。
左右にあるスライド画像を少し小さくしてみます。

slick.js

CSS

/* アニメーション設定 */
.slick-item {
	transform: scale(0.7);
	transition: transform 500ms;
}
.slick-center {
	transform: scale(1);
}

swiper.js

CSS

/* アニメーション設定 */
.swiper-slide {
	transform: scale(0.7);
	transition: transform 500ms;
}
.swiper-slide-active {
	transform: scale(1);
}

特に難しい設定をしているわけではなく、スライド要素にtransitionを設定して、中央に表示されているスライド要素とそれ以外のスライド要素で値を変えてアニメーションするようにしています。
slick.jsのデモページ
swiper.jsのデモページ

次はスライド要素に少し角度を付けてみます。

slick.js

CSS

/* アニメーション設定 */
.slick-item {
	transform: rotate(4deg);
	transition: transform 500ms;
}
.slick-center {
	transform: rotate(-4deg);
}

swiper.js

CSS

/* アニメーション設定 */
.swiper-slide {
	transform: rotate(4deg);
	transition: transform 500ms;
}
.swiper-slide-active {
	transform: rotate(-4deg);
}

slick.jsのデモページ
swiper.jsのデモページ

transitionのeasingを設定することで、少し変わった動きもつけることができます。
scaleの値を変更するサンプルのeasingを変更してみます。

slick.js

CSS

/* アニメーション設定 */
.slick-item {
	transform: scale(0.7);
	transition: transform 500ms  cubic-bezier(0.000, 1.650, 1.000, 1.650);
}
.slick-center {
	transform: scale(1);
}

swiper.js

CSS

/* アニメーション設定 */
.swiper-slide {
	transform: scale(0.7);
	transition: transform 500ms  cubic-bezier(0.000, 1.650, 1.000, 1.650);
}
.swiper-slide-active {
	transform: scale(1);
}

アニメション後の値を少し通過してから戻るアニメーションにできました。
slick.jsのデモページ
swiper.jsのデモページ