【Slick】ズーム&フェードするスライドショーを作る超簡単な方法

Slickは簡単&シンプルにスライドショーを作成することができるjQueryのプラグインです🔌
デフォルトでも十分いい感じのスライドショーやカルーセルを実装することができますが、、

例えば、メインビジュアルのスライドショーなどちょっとリッチに見せたい場合には少し工夫が必要です💡

ズームインしながらフェードで切り替えるスライドショー

まずはデモ👇

See the Pen slick-zoomIn-slideshow by marihashimoto (@mari877) on CodePen.

方法はいろいろありますが、、超絶シンプルな方法で実装しています。
beforeChangeなどでカスタムクラス名をつけたりしないで、slickのデフォルトのクラス名だけで実装してみます🙆‍♀️

ずばり、完成系のコードはこちら💊

ただただ、画像を入れているだけのシンプルなHTMLです。
slickを適用するために、大枠にだけsliderクラスをつけています👇

<div class="slider">
  <div>
    <img src="banana01.jpg">
  </div>
  <div>
    <img src="banana02.jpg">
  </div>
  <div>
    <img src="banana03.jpg">
  </div>
  <div>
    <img src="banana04.jpg">
  </div>
  <div>
    <img src="banana05.jpg">
  </div>
</div>

次にJavascript👇
slickのフェードインと自動再生などのオプションの設定を追加します。

$(function() {
  
  const arg = {
    fade: true,
    autoplay: true,
    arrows: false,
    speed: 1000,
    autoplaySpeed: 1000,
    pauseOnHover: false,
}
  
  $(".slider").slick(arg);
})

そしてCSS👇
CSSでアクティブなスライドにアニメーションを設定します。

前提として、Slickを適用すると、全てのスライドに.slick-slideが付与され、
アクティブなスライドには.slick-activeが付与されます。
そのデフォルトのクラスを活用してスタイルを適用していきます。

.slider {
  overflow: hidden;
  width: 500px;
  height: 300px;
  
  img {
    width: 100%;
    height:auto;
  }
}

.slick-active,
.slick-slide:has(+ .slick-active),
.slick-slide:last-child {
  animation: zoom-in 5s ease-out infinite;  
}

@keyframes zoom-in {
  100% {
    transform: scale(1.3);
  }
}

スムーズにズームインしながらフェードするためのポイント📝

アクティブなスライド(.slick-active)だけにアニメーションをつけると、スライドが切り替わるタイミングでアニメーションが中断されるので、スムーズな動きが損なわれてしまう、、

そう、こんなかんじにね、、、👇

See the Pen slick-zoomIn-slideshow__bad by marihashimoto (@mari877) on CodePen.

切り替わる直前に、一瞬元の画像サイズにもどって、次のスライドが表示されるという、残念なしあがり😢

スムーズな切り替えにするためには、アクティブになるスライドと、アクティブだったスライドにアニメーションを適用するのがポイント💡

アクティブなスライドに付与される.slick-activeと
.slick-activeの直前のスライドに対してアニメーションを適用します。
そのためのセレクタがこちら👇

//アクティブなスライド
.slick-active 

//.slick-activeの直前の.slick-slide
.slick-slide:has(+ .slick-active)

このセレクタ👆に対してお好みのCSSアニメーションを適用します。
アクティブなスライドが切り替わって、.slick-activeが外れた直後でもアニメーションは継続され、その次のスライドに切り替わった時にはアニメーションは一度不適用になります。
次に表示される時には新たにCSSアニメーションを適用することができます🏃‍♀️

最後のスライドから最初のスライドに変わるときの調整

このままでも、まあ大丈夫ですが、、一番最後のスライドから、一番最初のスライド(次のループ)に移行するときに、カクつきます🫠

最後のスライドに限っては、スライドの切り替わりの際に、.slick-activeの直前の要素ではなくなってしまうから、、、

それを回避するために、最後のスライドだけはデフォルトでアニメーションを適用しておきます🤺

.slick-slide:last-child //最後のスライド

アクティブなスライド、アクティブだったスライド、最後のスライドに同じアニメーションを適用しておけばシンプル記述でスッキリ😉

.slick-active,
.slick-slide:has(+ .slick-active),
.slick-slide:last-child {
  animation: zoom-in 5s ease-out infinite;  
}

さらにこのままだと、最後のスライドは表示されている時もされていない時もずっとアニメーションしているので、.slick-activeになる直前にアニメーションを不適用にしておくとよさそう。

そんなかんじで完成系はこちら👇

See the Pen slick-zoomIn-slideshow by marihashimoto (@mari877) on CodePen.

おわりに

もっと複雑な表現をしたい場合は、beforeChangeやafterChangeを使ってスライドにオリジナルのクラス名を付与したり、さまざまな処理を追加することもできます💡

参考: 📌 Slick

CSSのflexboxを使ってボックスをタイル状に並べる

flexboxでよくあるタイル状にボックスが並んだレイアウトを作る方法と考え方まとめ💡 ベーシックなタイル状のレイアウト 同じボックスをきれいに整列させていく一番ベーシックなレイアウト。ショッピングサイトのアイテム一覧や・・・

  • 【Slick】ズーム&フェードするスライドショーを作る超簡単な方法
  • あけましておめでとうございます2024
  • 2021年のバナナ
  • 縦方向中央に配置したいとき、align-items:center;が効かないときに確認すること
  • WordPressでカスタムタクソノミー一覧ページがリダイレクトされたときのメモ
  • HTMLのpicture要素でレスポンシブに対応した画像を読み込む
  • imgのsrcsetでレスポンシブで最適な画像を設定する方法
  • 2020年のバナナ
  • 要素を中央に表示したい!CSSでtext-align:center が効かないときに確認すること
  • スマホで100vhを使うと、アドレスバーの高さ分はみでてしまう
© b. All rights reserved.