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

クライアントからの要望で、「画面の横幅いっぱいに広がる画像スライドを作成してほしい」と依頼されることがよくあります。そこで、さまざまな方法を調べたところ、大きく分けて以下の3つのパターンの背景画像スライダーがあることが分かりました。

それぞれの概要とともに、サンプルページもご用意しましたので、ぜひ参考にしてください。

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

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

1.全画面表示

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

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

全画面表示と同じ

最後に

背景画像のスライドに使用する画像は、あくまでイメージ用のものなので、途中で途切れても特に問題はないと考えていました。しかし、クライアントの中には、画像が途中で途切れることを避けたいと考える方もいるようです。そこで、さまざまな試行錯誤を重ねた結果、今回ようやく一つの方法としてまとめることができました。もし過去の自分にこの内容を見せることができたら、どれほど助かったことでしょう…。