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

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

メモ Lightning G3 には Swiper が組み込まれているので、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="https://lightning-g3.hp1.work/wp-content/uploads/2021/05/1900x1000_spring.webp">
         </div>
         <div class="slide-text">春 - Spring</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-img">
          <img src="https://lightning-g3.hp1.work/wp-content/uploads/2021/05/1900x1000_summer.webp">
        </div>
        <div class="slide-text">夏 - Summer</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-img">
          <img src="https://lightning-g3.hp1.work/wp-content/uploads/2021/05/1900x1000_autumn.webp">
        </div>
        <div class="slide-text">秋 - Autumn</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-img">
          <img src="https://lightning-g3.hp1.work/wp-content/uploads/2021/05/1900x1000_winter.webp">
        </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;
}

サイト運営者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

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

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

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

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

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