【簡単】slickスライダーに画像が徐々に拡大されるズーム機能を導入しよう
slickプラグインを使ってスライダーを導入してる。
スライダーがフェードで切り替わる際、ズームでスライド要素の画像が拡大しながら切り替わる仕様に変更したい。
本記事ではこのような悩みを解決。
slickを使ったズームスライダーの実装方法について解説します。
※事前に実装環境にてjQuery・slickプラグインを導入しましょう。以下CDNをhead、もしくはbodyの終了タグ前に記述します。
<!-- slick CSS CDN-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- slick CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
実装サンプル
See the Pen
slick ズームスライダー by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
スライド画像がズームしながらフェードで切り替わる仕様になってるのが確認できるかと思います。
実装手順は以下の通りです。
HTML
<div class="slider">
<div class="slider-img slider-img-01">
</div>
<div class="slider-img slider-img-02">
</div>
<div class="slider-img slider-img-03">
</div>
</div>
まずはスライダー用のHTMLを準備します。
上記サンプルコードです。
HTMLファイルにコピペします。
CSS
/*スライドの高さを指定 overflow: hidden;を入れる*/
.slider {
width: 100%;
height: 500px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding: 0;
margin: 0;
}
/*スライドは背景画像にする*/
.slider-img {
content: "";
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 100%;
height: 300px;
/*スライド画像の高さ*/
}
/*スライド画像を指定*/
.slider-img-01 {
background-image: url(https://kasumiblog.xsrv.jp/codepen/images/clouds.jpg);
}
.slider-img-02 {
background-image: url(https://kasumiblog.xsrv.jp/codepen/images/forest.jpg);
}
.slider-img-03 {
background-image: url(https://kasumiblog.xsrv.jp/codepen/images/ocean.jpg);
}
.slick-list {
width: 100%;
}
/* アニメーションを指定 */
@keyframes fadezoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
/* 拡大率 */
}
}
.add-zoom {
animation: fadezoom 10s 0s forwards;
}
次にCSSを準備。
上記コードをCSSファイルに記述します。
スライダーで切り替わるスライド画像はCSSのbackgroundで背景画像として指定します。
任意の画像をパスで指定しましょう。
スライダーの親・子要素に任意の高さ（height）・横幅（width）を指定しましょう。
指定した横幅・高さ内で背景画像をズームさせる為。
ズーム機能にはCSSのアニメーションを使います。
add-zoomクラスに任意のanimationプロパティを指定します。
@keyframesとtransform: scale(拡大率);プロパティを使って背景画像を時間差で拡大させるようにします。
jQuery
$(function() {
$(".slider")
// 現在のスライドに"add-zoom"のclassを付与(data-slick-index="0"が現在のスライド)
.on("init", function() {
$('.slick-slide[data-slick-index="0"]').addClass("add-zoom");
})
.slick({
autoplay: true,
fade: true,
arrows: false,
speed: 2000, // スライド、フェードアニメーションの速度
autoplaySpeed: 3000, // 自動再生の切り替え速度
pauseOnFocus: false,
pauseOnHover: false,
})
.on({
// スライドが移動する前に発生するイベント
beforeChange: function(event, slick, currentSlide, nextSlide) {
// 現在のスライドに"add-zoom"のclassを付与
$(".slick-slide", this).eq(nextSlide).addClass("add-zoom");
// "add-zoom"のclassを消すための"remove-zoom"classを付与
$(".slick-slide", this).eq(currentSlide).addClass("remove-zoom");
},
// スライドが移動した後に発生するイベント
afterChange: function() {
// 現在のスライド以外は"add-zoom"のclassを削除
$(".remove-zoom", this).removeClass(
"remove-zoom add-zoom"
);
},
});
});
slickスライダーをズームにする実行コードサンプルです。
スクリプト内に記述します。
上記コードを入れる事で、現在のアクティブスライドに前章で指定したadd-zoomクラスが付与されるようになります。
slickのパラメータにspeed（スライド、フェードアニメーションの速度）、autoplaySpeed（自動再生の切り替え速度）が指定されてるので任意の数値に変更してみましょう。
以上の流れでズームスライダーの実装が完了です。
まとめ
slickではなくswiperプラグインを使ってズームスライダーを導入したい方はこちらの記事をご参考ください。
以上で解説を終わります。