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

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

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

<div class="slider">
  <div class="slider__slide slider__slide--1"></div>
  <div class="slider__slide slider__slide--2"></div>
  <div class="slider__slide slider__slide--3"></div>
</div>

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

jQuery(function ($) {
  // スライドショーの対象となる要素群を取得
  const $slides = $('.slider__slide');
  // 現在表示されているスライドのインデックス番号を保持
  let currentSlide = 0;
  // スライドの切り替え間隔（ミリ秒）
  const slideInterval = 4000;

  // 一定時間ごとにスライドを自動で切り替えるタイマーを設定
  let slideTimer = setInterval(nextSlide, slideInterval);

  /**
   * 次のスライドへ切り替える処理
   *
   * @return {void}
   */
  function nextSlide() {
    // 現在表示されているスライドを非表示（フェードアウト）
    $slides.eq(currentSlide).css('opacity', 0);

    // 次に表示するスライドのインデックス番号を算出（末尾の場合は先頭に戻る）
    currentSlide = (currentSlide + 1) % $slides.length;

    // 次のスライドを表示（フェードイン）
    $slides.eq(currentSlide).css('opacity', 1);
  }

  /**
   * アピールエリアの表示位置を取得し、CSSカスタムプロパティに設定
   *
   * @return {void}
   */
  function updateSlickPosition() {
    // 基準となる要素の上部からのオフセット座標を取得
    let slideTop = $('.appeal').offset().top;

    // 取得した座標をCSSカスタムプロパティに設定
    $('html').css('--slide-top', `${slideTop}px`);
  }

  // 初回読み込み時にアピールエリアの表示位置を取得
  updateSlickPosition();

  // 画面リサイズされた場合
  $(window).on('resize', updateSlickPosition);
});

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

: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;
}

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

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

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

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

.slider__slide--3 {
  background-image: var(--slide3);
}

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

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

<div class="slider" style="--slide-count: 3;">
  <div class="slider__slide" style="--i: 0; --slide-img: url(画像URL);"></div>
  <div class="slider__slide" style="--i: 1; --slide-img: url(画像URL);"></div>
  <div class="slider__slide" style="--i: 2; --slide-img: url(画像URL);"></div>
</div>

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

/* 1枚あたりの表示時間 */
:root {
  --delay: 4s;
}

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

.appeal-message {
  margin: 0;
}

/* 全体の再生時間は1枚の時間 × 枚数 */
.slider {
  --total-duration: calc(var(--delay) * var(--slide-count));
  height: 80vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slider__slide {
  animation: crossfade var(--total-duration) infinite;
  animation-delay: calc(var(--delay) * (var(--i) - var(--slide-count)));
  background-image: var(--slide-img);
  background-position: center;
  background-size: cover;
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

@keyframes crossfade {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

「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>

<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>

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

jQuery(function ($) {
  // Swiperインスタンスを生成しオプションを設定
  const swiper = new Swiper('.swiper', {
    effect: 'fade',
//    direction: 'vertical',
//    direction: 'horizontal',
    speed: 1000,
    loop: true,
    slidesPerView: 1,
    allowTouchMove: false,
    autoplay: {
      delay: 4000,
    },
  });

  /**
   * アピールエリアの表示位置を取得し、CSSカスタムプロパティに設定
   *
   * @return {void}
   */
  function updateSlickPosition() {
    // 基準となる要素の上部からのオフセット座標を取得
    let slideTop = $('.appeal').offset().top;

    // 取得した座標をCSSカスタムプロパティに設定
    $('html').css('--slide-top', `${slideTop}px`);
  }

  // 初回読み込み時にアピールエリアの表示位置を取得
  updateSlickPosition();

  // 画面リサイズされた場合
  $(window).on('resize', updateSlickPosition);
});

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

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

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

junpei-sugiyama.com

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

: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);
}