Web制作 slick スライダー

【slick】ズーム(拡大)しながらフェードで切り替える方法

【slick】ズーム(拡大)しながらフェードで切り替える方法
slickでズームしながらフェードで切り替える方法ない?

slickには様々なオプションがありますが、ズームさせるオプションはありません。

しかし、CSSアニメーションを使えば可能です。

今回はslickを使ってズームしながらフェードで切り替わるスライダーをご紹介します。

slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

参考記事
レスポンシブ対応のスライダープラグイン slickの使い方
レスポンシブ対応のスライダープラグイン slickの使い方

続きを見る

参考記事
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

続きを見る

またslickには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。

参考記事
【slick】カスタマイズ用オプションまとめ一覧
【slick】カスタマイズ用オプションまとめ一覧

続きを見る

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


slickでズーム(拡大)しながらスライドする方法

まずはどういうものか実際に見てみましょう。

See the Pen
slick(拡大しながらフェード)
by junpei (@junpei-sugiyama)
on CodePen.

 

コード解説

それでは次にコードを見ていきます。

最初はHTMLです。これは特に変わったところはありません。

<div class="slider">
  <div class="slick-img">
    <img src="画像パス" alt="" />
  </div>
  <div class="slick-img">
    <img src="画像パス" alt="" />
  </div>
  <div class="slick-img">
    <img src="画像パス" alt="" />
  </div>
</div>

次はCSSです。

.slider {
  height: 53vw;
  margin-inline: auto;
  overflow: hidden; /* 画像がはみ出ないようにする */
  width: 80vw;
}
.slick-img img {
  width: 100%;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}

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: 2000, // スライド、フェードアニメーションの速度2000ミリ秒
      autoplaySpeed: 4000, // 自動再生速度4000ミリ秒
      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の付け外しが出来れば可能なので、ぜひ試してみて下さい。

関連記事slick記事一覧
関連記事Swiper記事一覧

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
740部以上販売し、レビューは410件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高9万PV▶︎Twitterのフォロワーは6300人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計750部&450万円突破

-Web制作, slick, スライダー