春 - Spring
夏 - Summer
秋 - Autumn
冬 - Winter

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 ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

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

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

Lighting テーマ使用

WordPress サイト開設

スターターパック

  • デザイン済みパーツを組み合わせることで価格納期を大幅削減
  • プロが作ったクオリティが高いホームページ
  • サポート付き・ご自分でかんたんに情報発信できます