背景画像スライダーでよく使う3つのパターン

クライアントからの要望で、画面の横幅いっぱいを使った画像のスライドにしてほしいと言われることが多く、いろいろと調べてみると、大まかに下記の3パターンの背景画像スライダーが存在することが分かりました。
概要とともにサンプルページも作成してますので、ご参考ください。

  1. 全画面表示
  2. 画面上部に表示：背景画像の縦横比が同じ
  3. 画面上部に表示：背景画像の高さを固定

なお、今回利用してるスライダーはjQueryプラグインのjQuery.BgSwitcherです。背景画像をスライダーを作成するなら、とても使い勝手が良いので利用させて頂きました。

1.全画面表示

  • 表示領域に対して縦横100％で表示すると、全画面表示になる。
  • 画像は横900px縦600pxを利用。

スライダーのサンプル1

CSS

 html,
  body {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }

  .box {
    width: 100vw; //vwは画面幅に対する相対値
    height: 100vh; //vhは画面高さに対する相対値
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bg-ttl {
    color: #fff;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
  }

HTML

<div class="box">
  <h1 class="bg-ttl">背景画像スライダ―1<br>
全画面表示</h1>
</div>

JavaScript

jQuery(function($) {
    $('.box').bgSwitcher({
      images: ['01.jpg', '02.jpg', '03.jpg', '04.jpg'], // 切り替える背景画像
      Interval: 5000, //切り替えの間隔 1000=1秒
      start: true, //$.fn.bgswitcher(config)をコールした時に切り替えを開始
      loop: true, //切り替えをループする
      shuffle: false, //背景画像の順番をシャッフルする
      effect: "fade", //エフェクトの種類 (fade / blind / clip / slide / drop / hide)
      duration: 1000, //エフェクトの時間 1000=1秒
      easing: "swing", //エフェクトのイージング 
    });
  });

2.画面上部に表示(背景画像の縦横比が同じ)

  • 高さが固定ではないので、上下中央に文字を表示させるのが難しく、ここでは固定の位置に文字を表示した。
  • 難点として、スマホ表示にすると、縦幅がかなり小さくなる。
  • 背景画像の縦横比を保つ方法については背景画像の縦横比を保ち、レスポンシブ対応する方法をご覧ください。

スライダーのサンプル2

CSS

  html,
  body {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }

  .box {
    width: 100%;
    height: 0;
    padding-top: 40%; //600÷1500×100=40
    background-position: center center; 
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .bg-title {
    position: absolute;
    top:2.5rem;
    right:2.5rem;
    color: #fff;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
  }

HTMLとJavaScript

全画面表示と同じ

補足：背景画像の縦横比を保ち、レスポンシブ対応する方法

この方法については、height:0;にしてpadding-topを入れて高さを指定する方法が最も確実です。
その際、paddingの縦幅は横幅が基準となっているので、表示画像の高さ÷表示画像の幅×100とすると縦幅を求めることができます。
今回場合、画像は横1500px縦600pxなので、600÷1500×100=40(%)となります。

3.画面上部に表示(背景画像の高さを固定)

  • 通常の場合は画像の高さが500pxで固定されているが、スマホ表示(576px以下)は250pxに設定。
  • デバイスによって表示される領域が異なる。中心のものは表示されるが、中心から離れると表示されなくなる。
  • 2と同じく画像は横1500px縦600pxを利用。
  • 画面上部に表示するなら、2より3の方が使い易く、一般的によく使わている。

スライダーのサンプル3

CSS

html,
  body {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .box {
　  width: 100%;
　  height: 500px;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  @media screen and (max-width: 576px) {
    .box {
      height: 250px;
    }
  }
  .bg-title {
    color: #fff;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
  }

HTMLとJavaScript

全画面表示と同じ

最後に

背景画像のスライドの画像は、あくまでイメージ用の画像なので、途中で画像が途切れても問題ないと思ってましたが、クライアントによっては、画像が途中で途切れてしまっては困る方もいるようです。その中で、いろいろと試行錯誤した結果、ようやく今回まとめることができました。以前の自分に見せてあげたらどんなに助かったかもしれませんね…。

前の記事 次の記事