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

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

参考にさせていただいたページ

WordPressサイトで使える全画面ズームスライダーの作り方【Swiper.js使用】

メモ 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 を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

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

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

» ご相談・お問い合わせはこちらからどうぞ

今よりもっといい WordPress サイトにしたいなら Vektor Passport がおすすめ

Vektor Passport 1年
ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit / VK Blocks Pro を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています（個々の単体販売はされていません）。これらのプラグインを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひお使いになることをおすすめします。
ライセンス購入はこちら
カテゴリー
カスタマイズ
タグ
前の記事
グローバルメニューをスライドの下に配置したカスタマイズ例④
2021年9月20日
カテゴリー
カスタマイズ
タグ
CSS
Read more
次の記事
VK Blocks 1.16.0 の新機能「横並びアイコン」
2021年9月30日
カテゴリー
VK Blocks Pro
タグ
アイコン / SNS
Read more