【解説】slickでズーム＋フェード切り替えする方法【コピペOK】

記事内に広告を含みます

パソ君

・slickでズーム＋フェードして切り替える方法は？

こんな疑問にお答えします。

slickで実装するスライダーによっては、ズームさせたいことありますよね。

ですがslickのオプションでズームを実装することができません。

そこで活用するのがCSSアニメーションです。

ジト

簡単にできるよ！

ということで、この記事では「slickでズーム＋フェード切り替えする方法」について解説していきます！

この記事でわかること

slickでズーム＋フェード切り替えする方法

2023年1月24日【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】

【解説】slickでズーム＋フェード切り替えする方法【コピペOK】
【解説】slickでズーム＋フェード切り替えする方法【コピペOK】：まとめ

【解説】slickでズーム＋フェード切り替えする方法【コピペOK】

そんなズーム＋フェードしながら切り替えてるスライダーがこちら↓

See the Pen slickフェード＋ズーム➀ by jito-coder (@jito-coder) on CodePen.

<div class="test-slick">
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>

.test-slick {
    width: 100%;
    max-width: 500px;
    margin: 15px auto;
    position: relative;
    overflow: hidden; 
}

.add-anime {
    animation: zoom-anime 10s linear 0s normal both;
}

@keyframes zoom-anime {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5); 
    }
}

$(function () {
    $(".test-slick")
    .on("init", function () {
        $('.slick-slide[data-slick-index="0"]').addClass("add-anime");
    })
    .slick({
        fade: true,
        arrows: false,
        autoplay: true,
        speed: 2000,
        autoplaySpeed: 3000,
        pauseOnFocus: false,
        pauseOnHover: false,
    })
    .on({
        beforeChange: function (event, slick, currentSlide, nextSlide) {
            $(".slick-slide", this).eq(nextSlide).addClass("add-anime");
            $(".slick-slide", this).eq(currentSlide).addClass("remove-anime");
        },
        afterChange: function () {
            $(".remove-anime", this).removeClass(
                "remove-anime add-anime"
            );
        },
    });
});

コードの重要な点がこちら↓

大枠に「overflow: hidden;」を指定
ズームさせるCSSアニメーションを作成
jQueryにてクラス付与のコードを記述

順に見ていきましょう。

➀：大枠に「overflow: hidden;」を指定

まずスライダーを実装する大枠に「overflow: hidden;」を指定します。

これでズームしたときに、画像が枠からはみ出すのを防ぎます。

.test-slick {
    width: 100%;
    max-width: 500px;
    margin: 15px auto;
    position: relative;
    overflow: hidden; 
}

➁：ズームさせるCSSアニメーションを作成

続いてズーム用のCSSアニメーションを記述しましょう。

今回は例として「add-anime」というクラスに対して、「zoom-anime」というアニメーションを指定しました。

.add-anime {
    animation: zoom-anime 10s linear 0s normal both;
}

@keyframes zoom-anime {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5); 
    }
}

これで「add-anime」のクラスがつく要素を、拡大させることができます。

➂：jQueryにてクラス付与のコードを記述

あとは表示するスライドに「add-anime」というクラスを付与させれば実装完了です。

そこでjQueryを用いりクラス付与のコードを記述します。

下記コードにて初期スライドにadd-animeを付与する指定をします。

// slickを当てるクラスを指定
$(".test-slick")
// 最初に表示するスライドにadd-animeクラスを付与
.on("init", function () {
    $('.slick-slide[data-slick-index="0"]').addClass("add-anime");
})

そして通常通りのslickのコードを記述。fadeをtrueにして、フェードを有効化しましょう。

またspeedに記述する数値で、フェードの切り替え秒数を変更できます。

.slick({
    fade: true,
    arrows: false,
    autoplay: true,
    speed: 2000,
    autoplaySpeed: 3000,
    pauseOnFocus: false,
    pauseOnHover: false,
})

あとは移動するたびにクラスを付与したり、外すイベントを記述すればOKです。

それが下記コードですね。

.on({
    // スライド移動前に
    beforeChange: function (event, slick, currentSlide, nextSlide) {
        // 次のスライドにadd-animeクラスを付与
        $(".slick-slide", this).eq(nextSlide).addClass("add-anime");
        // 今のスライドにremove-animeクラスを付与
        $(".slick-slide", this).eq(currentSlide).addClass("remove-anime");
    },
    // スライド移動後に
    afterChange: function () {
        // remove-animeクラスの要素の、remove-anime add-animeクラスを外す
        $(".remove-anime", this).removeClass(
            "remove-anime add-anime"
        );
    },
});

「add-anime」クラスを付与したり、外す指定をしています。
つまりクラス付与に対応して、先ほど実装したCSSアニメーションが発動。

ズームしながら切り替えることができます。

で、完成したコードがこちら↓

$(function () {
    $(".test-slick")
    .on("init", function () {
        $('.slick-slide[data-slick-index="0"]').addClass("add-anime");
    })
    .slick({
        fade: true,
        arrows: false,
        autoplay: true,
        speed: 2000,
        autoplaySpeed: 3000,
        pauseOnFocus: false,
        pauseOnHover: false,
    })
    .on({
        beforeChange: function (event, slick, currentSlide, nextSlide) {
            $(".slick-slide", this).eq(nextSlide).addClass("add-anime");
            $(".slick-slide", this).eq(currentSlide).addClass("remove-anime");
        },
        afterChange: function () {
            $(".remove-anime", this).removeClass(
                "remove-anime add-anime"
            );
        },
    });
});

これでズーム＋フェード切り替え用のjQueryコードが完成しました。