Swiper を使って、全画面で画像がゆっくりとズームインしてくるスライドショーを作りました。

メモ Lightning G3 には Swiper が組み込まれているので、Swiper をインストールする（読み込ませる）必要はありません。

2022.2.17 追記 VK Blocks の設定に追加された 分割読み込み が有効になっていると、カスタム HTML で追加したスライダーが動作しません。分割読み込みを有効にして使う場合は、アクションフックなどで Swiper が動作するようにカスタマイズする必要があります。

カスタム HTML

<div class="swiper-wrap">
  <div class="swiper-container-4">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="slide-img">
          <img src="春の画像の URL">
         </div>
         <div class="slide-text">春 - Spring</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-img">
          <img src="夏の画像の URL">
        </div>
        <div class="slide-text">夏 - Summer</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-img">
          <img src="秋の画像の URL">
        </div>
        <div class="slide-text">秋 - Autumn</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-img">
          <img src="冬の画像の URL">
        </div>
        <div class="slide-text">冬 - Winter</div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

JavaScript

let swipeOption = {
  loop: true,
  effect: 'fade',
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  speed: 2000,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  }
}
new Swiper('.swiper-container-4', swipeOption);

CSS

.swiper-wrap {
  margin: 0 calc(50% - 50vw);
  max-width: 100vw;
  position: relative;
  overflow: hidden;
}

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

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoom-in 10s linear 0s 1 normal both;  
}

.slide-text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 3vw;
  font-family: serif;
  font-weight: bold;
  text-shadow: 2px 2px 8px #000;
  color: #fff;
  transform: translate(-50%,-50%);
}

.slide-img img{
  object-fit: cover;
  height: 100vh;
  width: 100vw;
}

投稿者プロフィール

対馬 俊彦魚沼情報サービス (新潟県南魚沼市)

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• Lightning G32024年10月24日サブメニューを開く親項目のリンクを無効にしたスマホ対応のカスタマイズ
• VK Filter Search Pro2024年8月28日日付ではなく年と月で範囲を指定して検索するカスタマイズ例
• カスタマイズ2024年1月24日タイトルを縦書きでブロックを左右交互にレイアウトした賃貸物件サイト例
• VK Blocks Pro2023年7月23日VK 投稿リストでカスタム分類のタームを親→子の順に表示した例