bxSliderのスライドをゆっくりズームしながら切り替えたい

公開日:2019/02/07 更新日:2020/11/12

bxSliderのスライドの動きはmodeで指定できる「縦スライド」「横スライド」「フェード」の三種類です
ここに少し手を加えることで、一味違う動きを実現することができます
今回は、スライドの画像を少しずつズームしていき、時間経過で次のスライドにフェードするというカスタマイズをしてみました

html

<ul class="zoom_slider">
    <li><img src="./images/slide_01.jpg" alt="スライド1枚目"></li>
    <li><img src="./images/slide_02.jpg" alt="スライド2枚目"></li>
    <li><img src="./images/slide_03.jpg" alt="スライド3枚目"></li>
</ul>

CSS

.zoom_slider > li[aria-hidden="false"] {
    animation: anime_zoom 4s linear;
}
.zoom_slider > li[aria-hidden="true"] {
    transform: scale(1.2);
}

@keyframes anime_zoom {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.2);
    }
}

bxSliderの各スライドのliタグは、表示中のスライドに「aria-hidden="false"」というスライドが、非表示のスライドに「aria-hidden="true"」という属性がつきます
属性セレクタを使い、「aria-hidden="false"」属性のあるliタグにアニメーションを設定します
アニメーションの内容は、スタートから終わりにかけてscaleを変更していきます。時間は4秒。これは後述するスライドの表示時間と同じ値にしておきます

jQuery

jQuery(function($){
    $('.zoom_slider').bxSlider({
        auto: true,
        pager: false,
        controls: false,
        mode: 'fade',
        speed: 1000,
        pause: 4000,
    });
});

bxSliderの設定です。modeはfadeにしておきます
スライドの表示時間を指定する「pause」には、アニメーションの時間と同じ4秒を指定します

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。