【祝！脱jQuery】Splideを使ってみよう vol.02

前回までのあらすじ

前回はメインビジュアル風の全画面、自動再生、無限ループスライダーを作成しました。
今回は、複数枚のスライドが表示されるスライダーを何パターンか作ってみたいと思ます。

基本的なことはすべて公式ドキュメントに書いてありますので（しかもなんと日本語で！！！）公式ドキュメントを是非参考にしてみてください。

３枚の画像を一度に表示するスライダー

基本的な使い方は前回のものを参照してください。

コード

HTML

画像を増やしました。新しく画像を準備するのが面倒な方は、下記コードのように、同じ画像を２～３倍に増やしておいてください。

.html

<section class="splide" aria-label="３枚の画像を一度に表示するスライダー">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide"><img src="./img/sample01.jpg"></li>
                <li class="splide__slide"><img src="./img/sample02.jpg"></li>
                <li class="splide__slide"><img src="./img/sample03.jpg"></li>
                <li class="splide__slide"><img src="./img/sample01.jpg"></li>
                <li class="splide__slide"><img src="./img/sample02.jpg"></li>
                <li class="splide__slide"><img src="./img/sample03.jpg"></li>
            </ul>
        </div>
    </section>

JS

.js

new Splide('.splide', {
    perPage: 3,
}).mount();

perPageオプションで１度に表示する枚数を設定します。

結果

例のごとく縦長の画像があるので、CSSで整えていきましょう。
heightRetioオプションでうまくいくのかなと思っていたのですが、少なくとも画像だと思ったようにならず。

コード（追加）

CSS

.css

.splide__slide img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

結果

３枚のうち中央の画像が拡大されて表示されるスライダー

コード

HTML

変更なし

JS

js .js

new Splide('.splide', {
    type: 'loop',
    perPage: 3,
    perMove: 1,
    focus: 'center',
    gap: 20,
}).mount();

perMoveオプションで、１回の移動で移動する枚数を設定します。今回は１枚です。これを設定しないとperPageの数値と同じ枚数分移動します。

focus:'center'はページネーションをスライドの枚数分表示するために設定しています。また、type:'slide'だとページネーションの挙動がちょっと？？？な感じになるので、'loop'にしました。

gapはスライドとスライドの間隔です。前回説明した通り、単位を付けたい場合は''で囲ってください。

CSS

変更なし

結果

静止画なのでわかりづらいですが、先程と違ってスライドが１枚ずつ動きます。

では、中央の画像を拡大していきましょう。

中央の画像拡大の方針

拡大する動きはCSSのtransitionでやっていきます。
Splideでは、アクティブなスライド（今回であれば中央のスライド）にis-activeクラスが付与されます。
おそらく公式ドキュメントのどこかに書いてあると思うのですが、わたしは検証ツールから確認しました。

と言うことは、is-activeクラスが付与されたら拡大するようにCSSでtransitionを設定してやればよいですね。

また、is-activeクラス付与のタイミングですが、こちらはオプションとしてupdateOnMoveというものがあり、これをtrueにすることで、動き始めのタイミングでis-activeを付与するようになります。ですので、このオプションをtrueにしておきましょう。

コード

JS

js .js

new Splide('.splide', {
    type: 'loop',
    speed: 1000,
    perPage: 3,
    perMove: 1,
    focus: 'center',
    //CSS側で調整するので、このgapはなくても大丈夫
    gap: 20,
    updateOnMove: true,
}).mount();

CSS

css .css

.splide__slide img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* あらかじめ縮小して表示しておく */
  scale: 0.9;
  /*Splideのspeedオプションと数値を合わせるとナチュラルな動きに*/
  transition: scale 1s;
}

/* is-activeが付いたら拡大 */
.splide__slide.is-active img{
  scale: 1.0;
}

結果

See the Pen Untitled by yoruokamix (@yoruokamix) on CodePen.

まとめ

今回は、一度に３枚のスライドを表示し、かつ中央のスライドを拡大するスライダーを作成しました。ほかにもいろいろ展開していけると思いますので、ぜひいろんなスライダーを作成してみてください。