[swiper] フルスクリーンスライダー

デザイン
2021.08.04

構成

今回のスライダー、デザイン構成
  • フルスクリーン
  • スライドごとにテキスト配置
  • テキストの視認性を上げるために、透過の黒レイヤーを画像の上に重ねる
  • ブラウザ読み込み時に画像表示のチラつきを防止するために、遅延ロードを設定

DEMO [swiper] フルスクリーンダー

swiperの使い方

プラグインのインストール方法、基本設定については公式サイトもご参考ください。

swiper公式サイト
Getting Started With Swiper

swiperのURL（CDN）をHTMLに記載

swiperプラグイン読み込みは、CDNでHTMLに記載が一番楽な方法です。

<head></head>内に、swiperのcssを読み込むURL（CDN）を記載

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

</body>の直前に、swiperのjavascriptを読み込むURL（CDN）を記載

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

swipeの設定

今回のスライダーの設定内容
  • 自動ループ
  • フェードで画像切り替え
  • 画像遷移（左右に矢印）のナビゲーション
  • ページネーション（スライド下部に白い丸）

javascriptに記載するコードはこちらになります。

26行目まではswiperの設定。

32行目〜35行目は遅延ロード用の設定。
ウィンドウがロードされたら、id「loader」のHTMLのclassに「loaded」を追加します。

/*
  swiper option
*/
const swiper = new Swiper(".swiper-container", {
  speed: 2000, // スライドとスライドの遷移時間
  effect: "fade", // フェード効果
  fadeEffect: {
    // エフェクト詳細
    crossFade: true, // 次のスライドと画像が重なった時にフェードする
  },
  loop: true, // ループ
  autoplay: {
    // 自動再生
    delay: 3000, // 遷移間の遅延
  },
  navigation: {
    // ナビゲーション（左右に移動矢印表示）
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  pagination: {
    // ページネーション（スライド下部に白丸のナビゲート表示）
    el: ".swiper-pagination",
    clickable: true,
  },
});

/*
  Top Lazy Load
  遅延ロード用
*/
window.onload = () => {
  const loader = document.getElementById("loader");
  loader.classList.add("loaded");
};

設定値の詳細はswiper公式サイトもご参考ください
Swiper API

HTMLの設定

今回は、各スライド内にテキストも表示できるようにしました。

<!-- [▼ swiper slider ] ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url('img/slide/slide_img01.jpg')">
          <div class="catch-area">
            <p class="catch-title">スライド01</p>
            <p class="catch-text">スライド01テキスト</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url('img/slide/slide_img02.jpg')">
          <div class="catch-area">
            <p class="catch-title">スライド02</p>
            <p class="catch-text">スライド02テキスト</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url('img/slide/slide_img03.jpg')">
          <div class="catch-area">
            <p class="catch-title">スライド03</p>
            <p class="catch-text">スライド03テキスト</p>
          </div>
        </div>
      </div>

      <!-- [▼ pagination] -->
      <div class="swiper-pagination swiper-pagination-white"></div>
      <!-- [▼ navigation] -->
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
    </div>

swiperのベースHTMLの書き方は、Swiper APIの「Swiper Full HTML Layout」もご参考ください。

CSS設定

全体のスタイルソースはこちらになります。

/* --------------------------------
  0：base
  レイアウトのベーススタイル
-------------------------------- */
body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 auto;
  width: 1200px;
}

.contents-main {
  margin-top: 100px;
}

/* --------------------------------
  1：swiper
  スライダーのスタイル
-------------------------------- */

.swiper-wrapper .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  opacity: 0;
  overflow: hidden;
}

/* ------ catch area ------- */
.catch-area {
  color: white;
  position: absolute;
  text-align: center;
  top: 45%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}

.catch-title {
  font-size: 40px;
  padding-bottom: 10px;
}

.catch-text {
  font-size: 21px;
}

/* ------ Transparent layer ------- */
.swiper-slide::before {
  background: rgba(0, 0, 0, 0.2);
  bottom: 0;
  content: "";
  height: 100vh;
  left: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}

.swiper-slide.swiper-slide-active::before {
  opacity: 1;
}

/* --------------------------------
  ２：Top Lazy Load
  遅延ロード用スタイル
-------------------------------- */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
    z-index: -1;
  }
}

#loader {
  background-color: #000;
  height: 100vh;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

#loader.loaded {
  animation: fadeOut 0.5s forwards;
}

0：base　レイアウトのベーススタイル

body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 auto;
  width: 1200px;
}

.contents-main {
  margin-top: 100px;
}

ポイントは、bodyに「margin: 0;」「padding: 0;」を設定しているところです。
この設定がないと、スライドにフルスクリーンのcssを設定しても、bodyにもともとついている余白が影響して画像が動いてしまいます。
body「margin: 0;」「padding: 0;」を設定すると、画面にピタッと画像がはまるようになります。

1：swiper　スライダーのスタイル

スライダーの画像設定

.swiper-wrapper .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  opacity: 0;
  overflow: hidden;
}

フルサイズのウィンドウに画像が収まるようにスタイリングします。

テキストエリア設定

position: absolute; などで、表示位置を固定しています、

/* ------ catch area ------- */
.catch-area {
  color: white;
  position: absolute;
  text-align: center;
  top: 45%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}

.catch-title {
  font-size: 40px;
  padding-bottom: 10px;
}

.catch-text {
  font-size: 21px;
}

スライド画像の上に黒の透過レイヤーを設定

「::before」タグを使って、黒の透過レイヤーを背景として設定しています。
この一枚をレイヤーとして敷くことで、上に重ねている白のテキストの視認性をアップさせています。

/* ------ Transparent layer ------- */
.swiper-slide::before {
  background: rgba(0, 0, 0, 0.2);
  bottom: 0;
  content: "";
  height: 100vh;
  left: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}

.swiper-slide.swiper-slide-active::before {
  opacity: 1;
}

遅延ロード用のスタイル

ウィンドウ読み込み時に、スライド画像表示前に、レイヤーで敷いた黒の透過背景が見えてしまうなど、画面表示がほんの少しですが乱れる時があります。

調整として、黒い画面で遅延ロードを設定しました。

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
    z-index: -1;
  }
}

#loader {
  background-color: #000;
  height: 100vh;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

#loader.loaded {
  animation: fadeOut 0.5s forwards;
}


タイトルとURLをコピーしました