【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショー

基本の「slickの実装方法」については下記の記事で確認できます。

Slick/全画面でふわっと切り替えスライドショー【jQuery】スライダープラグイン【slick】を使って全画面スライドショーを実装。「slickの実装方法」と「slickのカスタマイズ」について解説していきます。画像のスライドショーにはいろんな方法がありますが、jQueryベースの【slick】が安定していてカスタマイズもしやすいのでオススメです。コピーペーストで実装可能です。...

▪DEMOは下記【Run Pen】をクリック⇩

See the Pen 【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショー by pull-design (@design90806871) on CodePen.

【ズーム機能を追加】Slick/スライドショー
- HTML
- CSS
- JS

【ズーム機能を追加】Slick/スライドショー

画像はliのbackground-imageで指定しているので、画像を変更したい場合はCSSの.slider liの部分の指定変更で変更可能です。

HTML

<ul class="slider">
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

/* リセットCSS */
body,ul,li {padding: 0;margin: 0;}
/* スリックスライダー */
.slider li {
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.slider li:first-of-type {
	background-image: url(https://picsum.photos/1921/1080);
}
.slider li:nth-child(2) {
	background-image: url(https://picsum.photos/1922/1081);
}
.slider li:last-of-type {
	background-image: url(https://picsum.photos/1923/1082);
}
/* 拡大率調整 */
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}
/* ズームアニメーション */
.animation {
  animation: fadezoom 15s 0s forwards;
}

JS

$(function () {
  $(".slider")
    // 1番目のスライドに"animation"のclassを付ける
    .on("init", function () {
      $('.slick-slide[data-slick-index="0"]').addClass("animation");
    })
    .slick({
      autoplay: true, //スライダーの自動再生
      fade: true, //スライドの切り替えをフェードに
      arrows: false, //前へ、次への矢印ボタンの有無
      speed: 6000, // スライド、フェードアニメーションの速度1000ミリ秒
      autoplaySpeed: 3000, //自動再生時のスライドの静止時間
      pauseOnFocus: false, //フォーカスで一時停止を無効
      pauseOnHover: false, //マウスホバーで一時停止を無効
      pauseOnDotsHover: false, //ドットナビゲーションをマウスホバーで一時停止を無効
    })
    .on({
      // スライドが移動する前に表示されているスライドに"animation"のclassをつける
      // "animation"のclassを消すための"remove"classを付ける
      beforeChange: function (event, slick, currentSlide, nextSlide) {
        $(".slick-slide", this).eq(nextSlide).addClass("animation");
        $(".slick-slide", this).eq(currentSlide).addClass("remove");
      },
      // スライドが移動した後に表示していないスライダーはアニメーションのclassを外す
      afterChange: function () {
        $(".remove", this).removeClass(
          "remove animation"
        );
      },
    });
});

▪高機能スライダーのSwiperとscrollifyを組み合わせてふわっと画像切り替える方法もありますので、ご自身の導入しやすい方法で実装するのもありですね。