Splideには様々なオプションがありますが、ズームさせるオプションはありません。
しかし、CSSアニメーションを使えば可能です。
今回はSplideを使ってズームしながらフェードで切り替わるスライダーをご紹介します。
Splideの基本的な使い方についてはこちらの記事を参照下さい。
-
【2023年最新】Splideの使い方とよく使うオプション・カスタマイズ方法を解説
続きを見る
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
5大無料特典2023年12月31日まで！
Splideでズーム（拡大）しながらスライドする方法
まずは基本となるスライダーを見てみましょう。
See the Pen
Splide：基本形 by junpei (@junpei-sugiyama)
on CodePen.
前後の矢印、ページネーションが表示されているシンプルなスライダーです。
今回はHTML・CSSは基本形と同じで、JavaScriptでオプションを追加していきます。
コード解説
それではコードを解説していきます。
HTML
まずHTMLはこちらです。
<div class="splide" role="group" aria-label="ズームしながらフェード">
<div class="splide__track">
<div class="splide__list">
<div class="splide__slide">
<img src="画像パス1" alt="" />
</div>
<div class="splide__slide">
<img src="画像パス2" alt="" />
</div>
<div class="splide__slide">
<img src="画像パス3" alt="" />
</div>
</div>
</div>
</div>これは基本形と同じです。
CSS
CSSはこちらです。
/* ズーム */
.splide__slide img {
transition: 8s ease-out;
}
.splide__slide.is-active img {
transform: scale(1.15);
transition-delay: 0s;
}
/* スライドのサイズ調整 */
.splide__slide img {
height: auto;
width: 100%;
}今回はこのCSSがポイントですが、transform: scale(1.15);で表示されているスライドを15%拡大しています。
あとはtransition-delay: 0s;が無いとスライドの切り替わる時に変な挙動をします。
transition: 8s ease-out;では8秒にしていますが、これはJavaScriptのintervalとspeedを合わせた時間より1秒大きくしています。
ぴったりにしてしまうと一瞬停止してしまうからで、もっと遅くするとズームはゆっくりになります。
JavaScript
そしてJavaScriptはこちらです。
const splide = new Splide(".splide", {
autoplay: true, // 自動再生
type: "fade", // フェード
rewind: true, // スライダーの終わりまで行ったら先頭に巻き戻す
pauseOnHover: false, // カーソルが乗ってもスクロールを停止させない
pauseOnFocus: false, // 矢印をクリックしてもスクロールを停止させない
interval: 5000, // 自動再生の間隔
speed: 2000, // スライダーの移動時間
}).mount();ここではtypeをスライドではなくフェードにしています。
そしてtype: "fade"でループさせる場合にはrewind: trueにする必要があります。
あとはintervalとspeedで時間の調整をするだけです。
デモ
そしてこちらがデモになります。
See the Pen
Splide（ズームしながらフェード） by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回はSplideでズーム（拡大）しながらフェードで切り替える方法を解説してきました。
CSSアニメーションを使えばもっといろいろな実装が出来ると思うので、ぜひ試してみて下さい。
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧
