簡単にSWELL風のスライドをアピールエリアに表示する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

SWELL風のメインビジュアルスライドを、アピールエリアに表示します。
この記事では、JavaScriptやCSSを使用して3枚の画像をフェードイン・フェードアウトさせるスライドショーの作成方法と、Swiper.jsを用いた実装例について説明します。

メインビジュアルの設定方法 | WordPressテーマ SWELL

このページではSWELLの「メインビジュアル」機能の設定方法を解説していきます。ちなみに「メインビジュアル」とは、トップページを開いた時に最初に目に飛んでくるエリアのことです。画像を1枚だけ画面いっぱいに表示させたり、画像スライダーを設

完成イメージ

実装手順

以下の3つの方法で実現できます。

JavaScriptを使用して実現
CSSのみで実現
Swiper.jsを使用して実現

それぞれの方法について、具体的な手順を説明していきます。

JavaScriptを使用して実現

ラベル
Cocoon設定

表1に示す項目を設定します。

Cocoon設定
設定大項目項目設定値
アピールエリアアピールエリアの表示表示する
メッセージ patternショートコードを登録

設定	大項目	項目	設定値
アピールエリア	アピールエリアの表示		表示する
メッセージ		`pattern`ショートコードを登録

ラベル

HTMLを追加

以下のコードを「カスタムHTML」ブロックに入力します。

<div class="slide-wrapper">
  <div class="slide slide1"></div>
  <div class="slide slide2"></div>
  <div class="slide slide3"></div>
</div>

ラベル

JavaScriptを追加

以下のコードを「カスタムHTML」ブロックに入力します。

jQuery(function($) {
  const $slides = $('.slide');
  let currentSlide = 0;
  const slideInterval = 4000; // 画像切り替え時間（ミリ秒）

  // 画像切り替えの初期設定
  let slideTimer = setInterval(nextSlide, slideInterval);

  // 画像切り替え関数
  function nextSlide() {
    $slides.eq(currentSlide).css('opacity', 0); // 現在のスライドをフェードアウト
    currentSlide = (currentSlide + 1) % $slides.length;
    $slides.eq(currentSlide).css('opacity', 1); // 次のスライドをフェードイン
  }

  // スライド表示位置取得
  function updateSlickPosition() {
    let slideTop = $(".appeal").offset().top;
    $("html").css("--slide-top", `${slideTop}px`);
  }

  updateSlickPosition();
  $(window).on("resize", updateSlickPosition);
});

ラベル

CSSを追加

以下のコードを「カスタムHTML」ブロックに入力します。

<style>
:root {
  --slide1: url(画像URL);         /* スライド画像1 */
  --slide2: url(画像URL);         /* スライド画像2 */
  --slide3: url(画像URL);         /* スライド画像3 */
}

/* アピールエリアを画面幅に変更 */
.appeal-in,
.appeal-content {
  max-width: unset;
  padding: 0;
  width: 100%;
}

.appeal-message {
  margin: 0;
}

/* スライド設定 */
.slide-wrapper {
  height: calc(100vh - var(--slide-top));
  overflow: hidden;
  position: relative;
}

.slide {
  background-size: cover;
  height: 100%;
  opacity: 0;
  position: absolute;
  transition: opacity 1s ease-in-out;
  width: 100%;
}

.slide1 {
  background-image: var(--slide1);
  opacity: 1;
}

.slide2 {
  background-image: var(--slide2);
}

.slide3 {
  background-image: var(--slide3);
}
</style>

CSSみので実現

CSSアニメーションを使って、スライドを切り替えます。JavaScriptが不要なため、軽量なサイトを作成する際に便利です。

ラベル
Cocoon設定

「JavaScriptを使用して実現」と同様です。

ラベル

HTMLを追加

以下のコードを「カスタムHTML」ブロックに入力します。

<div class="slide-wrapper">
  <div class="slide slide1"></div>
  <div class="slide slide2"></div>
  <div class="slide slide3"></div>
</div>

ラベル

JavaScriptを追加

以下のコードを「カスタムHTML」ブロックに入力します。

jQuery(function($) {
  // スライド表示位置取得
  function updateSlickPosition() {
    let slideTop = $(".appeal").offset().top;
    $("html").css("--slide-top", `${slideTop}px`);
  }

  updateSlickPosition();
  $(window).on("resize", updateSlickPosition);
});

ラベル

CSSを追加

以下のコードを「カスタムHTML」ブロックに入力します。

<style>
:root {
  --delay: 4s;                    /* 画像1枚の表示時間 */
  --slide1: url(画像URL);         /* スライド画像1 */
  --slide2: url(画像URL);         /* スライド画像2 */
  --slide3: url(画像URL);         /* スライド画像3 */
}

/* アピールエリアを画面幅に変更 */
.appeal-in,
.appeal-content {
  max-width: unset;
  padding: 0;
  width: 100%;
}

.appeal-message {
  margin: 0;
}

/* スライド設定 */
.slide-wrapper {
  height: calc(100vh - var(--slide-top));
  overflow: hidden;
  position: relative;
}

.slide {
  animation: fade calc(var(--delay) * 3) infinite;
  background-size: cover;
  height: 100%;
  position: absolute;
  opacity: 0;
  width: 100%;
  z-index: 10;
}


.slide1 {
  animation-delay: 0s;
  background-image: var(--slide1);
}

.slide2 {
  animation-delay: var(--delay);
  background-image: var(--slide2);
}

.slide3 {
  animation-delay: calc(var(--delay) * 2);
  background-image: var(--slide3);
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}
</style>

Swiper.jsを使用して実現

ラベル
Cocoon設定

「JavaScriptを使用して実現」と同様です。

ラベル

HTMLを追加

以下のコードを「カスタムHTML」ブロックに入力します。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><div class="slide1"></div></div>
    <div class="swiper-slide"><div class="slide2"></div></div>
    <div class="swiper-slide"><div class="slide3"></div></div>
  </div>
</div>

Swiper.js を使用する際、表1に示すCSSクラスが必須であり、HTMLに記述する必要があります。

Swiper.jsで必須のCSSクラス

CSSクラス	説明
swiper-wrapper	スライドを囲むラッパーのクラスです。すべてのスライド要素をこのクラスで囲む必要があります。
swiper-slide	各スライドを示すクラスです。スライドコンテンツをこのクラスで囲みます。

ラベル

JavaScriptを追加

以下のコードを「カスタムHTML」ブロックに入力します。

<link rel='stylesheet' id='swiper-style-css' href='https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css' />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
  effect: 'fade',
//  direction: 'vertical',
//  direction: 'horizontal',
  speed: 1000,
  loop: true,
  slidesPerView: 1,
  allowTouchMove: false,
  autoplay: {
    delay: 4000,
  },
});


// スライド表示位置取得
jQuery(function($) {
  function updateSlickPosition() {
    let slideTop = $(".appeal").offset().top;
    $("html").css("--slide-top", `${slideTop}px`);
  }

  updateSlickPosition();
  $(window).on("resize", updateSlickPosition);
});
</script>

effectではなく、directionを定義すると、horizontalを指定すれば横にスライドし、verticalを指定すれば縦にスライドします。
Swiper.jsのオプションに関する詳細は、以下を参照ください。

【Swiper】カスタマイズ用オプションまとめ一覧

Swiperのオプション一覧をまとめて解説。スライダーのカスタマイズには必須で、全部覚える必要はありませんが知っておいて損はありません。保存必須。

ラベル

CSSを追加

以下のコードを「カスタムHTML」ブロックに入力します。

<style>
:root {
  --slide1: url(画像URL);         /* スライド画像1 */
  --slide2: url(画像URL);         /* スライド画像2 */
  --slide3: url(画像URL);         /* スライド画像3 */
}

/* アピールエリアを画面幅に変更 */
.appeal-in,
.appeal-content {
  max-width: unset;
  padding: 0;
  width: 100%;
}

.appeal-message {
  margin: 0;
}

/* スライド設定 */
.swiper {
  height: calc(100vh - var(--slide-top));
}

.swiper-wrapper {
  margin: 0;
}

.swiper-slide {
  overflow: hidden;
}

.swiper-slide div {
  background-size: cover;
  height: 100%;
}

.slide1 {
  background-image: var(--slide1);
}

.slide2 {
  background-image: var(--slide2);
}

.slide3 {
  background-image: var(--slide3);
}
</style>

さいごに

今回紹介した方法を使えば、SWELL風のメインビジュアルスライドをアピールエリアに簡単に表示することができます。
特に、Swiper.jsを使用することで、オプションを変更するだけで多様なスライド表現が可能になり、非常に便利です。