
slickでズームしながらフェードで切り替える方法ない?
slickには色んなオプションがありますが、ズームさせるオプションはありません。
しかし、cssアニメーションを使えば可能です。
今回はslickを使ってズームしながらフェードで切り替わるスライダーをご紹介します。
slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
レスポンシブ対応のスライダープラグイン「slick」の使い方
またslickには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。
効率よくコーディングしたい人はこちら
slickでズーム(拡大)しながらスライドする方法
まずはどういうものか実際に見てみましょう。
See the Pen
slick(拡大しながらフェード) by junpei (@junpei-sugiyama)
on CodePen.
コード解説
それでは次にコードを見ていきます。
最初はHTMLです。これは特に変わったところはありません。
<ul class="slider">
<li class="slick-img">
<img src="画像パス" alt=""/>
</li>
<li class="slick-img">
<img src="画像パス" alt=""/>
</li>
<li class="slick-img">
<img src="画像パス" alt=""/>
</li>
</ul>
次はCSSです。
.slider {
height: 53vw;
margin-left: auto;
margin-right: auto;
overflow: hidden; /* 画像がはみ出ないようにする */
width: 80vw;
}
.slick-img img {
width: 100%;
}
@keyframes fadezoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1); /* 拡大率 */
}
}
.add-animation {
animation: fadezoom 5s 0s forwards;
}
CSSのポイント
- 全体を囲う要素に
overflow: hidden;
でズームした画像がはみ出さないようにする - @keyframesでズームの拡大率を設定
- slickの設定で付けたclass名"add-animation"のスタイルを設定
拡大率やズームの時間はここで調整可能です。
最後にjQueryを見てみます。
$(function () {
$(".slider")
// 最初のスライドに"add-animation"のclassを付ける(data-slick-index="0"が最初のスライドを指す)
.on("init", function () {
$('.slick-slide[data-slick-index="0"]').addClass("add-animation");
})
// 通常のオプション
.slick({
autoplay: true, // 自動再生ON
fade: true, // フェードON
arrows: false, // 矢印OFF
speed: 1000, // スライド、フェードアニメーションの速度1000ミリ秒
autoplaySpeed: 3000, // 自動再生速度3000ミリ秒
pauseOnFocus: false, // フォーカスで一時停止OFF
pauseOnHover: false, // マウスホバーで一時停止OFF
})
.on({
// スライドが移動する前に発生するイベント
beforeChange: function (event, slick, currentSlide, nextSlide) {
// 表示されているスライドに"add-animation"のclassをつける
$(".slick-slide", this).eq(nextSlide).addClass("add-animation");
// あとで"add-animation"のclassを消すための"remove-animation"classを付ける
$(".slick-slide", this).eq(currentSlide).addClass("remove-animation");
},
// スライドが移動した後に発生するイベント
afterChange: function () {
// 表示していないスライドはアニメーションのclassを外す
$(".remove-animation", this).removeClass(
"remove-animation add-animation"
);
},
});
});
jQueryのポイント
- 最初のスライドにアニメーション用のclassを付ける
- 表示しているスライドにアニメーション用のclassを付ける
- 表示していないスライドはアニメーション用のclassを外す
要するにアニメーション用のclassを付け外ししているだけですね。
あとは通常のオプションも設定可能です。
オプションになくてもclassの付け外しが出来れば可能なので、ぜひ試してみて下さい。
Brainランキング1位獲得 & 3日で500部突破 クチコミ約280件(平均スコア) 今だけ!5大特典あり🎁コーディング案件の単価と作業効率を上げる!