CSS のみでサムネイルナビ付きスライダーを表現してみる

今回の Tips は、JavaScript を一切利用せず、CSS のみを駆使して表現するイメージスライダーを作ってみます。
スライドは、サムネイル付きのナビゲーションボタンをクリックすることで切り替わるようにしてみます。

まずは、完成イメージのサンプルをご覧ください。

CSS のみで表現するスライダーデモ

See the Pen
Pure CSS thumbnail slider by digistate (@digistate)
on CodePen.

過去記事でも何度か紹介していますが、スライドの切り替え方法は、アンカー(a)タグの href 値にハッシュリンク(#)を指定し、そのリンクをクリックすることで対象要素に付けられる :target 疑似セレクタを利用します。

INDEX

CSS のみで表現するスライダーデモ
- HTML の構成
- CSS の構造
フェードインで切り替わるスライダーのデモ

HTML の構成

スライダーの HTML は、メインのスライダー用とサムネイルナビゲーション用の2つの対になるリスト(ul, li)を作ります。

メインスライダー

メインスライダー用の HTML は以下のような構成(リスト)にします。

<ul class="main-slider">
  <li class="slide" id="slide-1">
    <figure>
      <img src="画像URL">
    </figure>
    <div class="meta">
      <p class="title">スライドタイトル</p>
      <p class="desc">概要など</p>
    </div>
  </li>

  <!-- 以後、スライド(li)を固有のIDを付けて必要なだけ記述 -->
</ul>

後述するサムネイルナビゲーションの各アイテム(ハッシュリンク)から参照(:target を有効)させるため、各リスト(li)には、必ず固有の ID を付けておきます。

サムネイルスライダー

スライドを切り替えるためのサムネイルスライダーの HTML は以下のような構成にします。

<ul class="thumbnail-slider" role="navigation">
  <li class="slide">
    <a href="#slide-1">
      <figure>
        <img src="画像URL">
      </figure>
    </a>
  </li>

  <!-- 以後、メインスライダーと対になる数だけ記述 -->
</ul>

サムネイルスライダーの各スライドは、アンカータグで括り、参照先(href)は、メインスライダーの各スライドに付けた ID のハッシュリンクにします。

メインスライダーとサムネイルスライダーのラッパー

メインスライダーとサムネイルスライダーは、フルワイドで隣接したレイアウトにします。
このため、CSS のフレックスボックス(display:flex)を使用してメインスライダーとサムネイルスライダーをまとめるラッパー要素(.container)で括ります。

<div class="container">

  <ul class="main-slider">
    <li class="slide" id="slide-1">
      <figure>
        <img src="画像URL">
      </figure>
      <div class="meta">
        <p class="title">スライドタイトル</p>
        <p class="desc">概要など</p>
      </div>
    </li>

    <!-- 以後、スライド(li)を固有のIDを付けて必要なだけ記述 -->

  </ul>

  <ul class="thumbnail-slider" role="navigation">
    <li class="slide">
      <a href="#slide-1">
        <figure>
          <img src="画像URL">
        </figure>
      </a>
    </li>

    <!-- 以後、メインスライダーと対になる数だけ記述 -->

  </ul>

</div>

CSS の構造

ラッパー要素

ラッパー要素(.container)は、display:flex にし、ビューポートに対する適当な高さを指定しています。

.container{
  position:relative;
  margin:0 auto;
  height:40vw;
  display:flex;
  justify-content:center;
}

このサンプルでは、表示幅に応じて可変(伸縮)するよう、レスポンシブ化しています。

メインスライダー

メインスライダー(.main-slider)の CSS は、フルワイドのサイズから隣接するサムネイルナビゲーションのスライダーの幅分(ここでは 100vw – 26vw )を空けておきます。

.main-slider{
  position:relative;
  width:74vw;
  height:100%;
  overflow:hidden;

サムネイルナビゲーションスライダー

サムネイルナビゲーションのスライダーは、サムネイルが垂直に並び、サンプルでは5枚まで一度に表示し、それ以上ある場合はスクロールで表示されるようにしています。

.thumbnail-slider{
  position:relative;
  width:26vw;
  height:100%;
  line-height:0;
  overflow-y:auto; /* 垂直方向のスクロールを許可 */
}

.thumbnail-slider .slide{
  position:relative;
  height:20%;  /* 5枚まで一度に表示 */
  overflow:hidden;
}

スライドの基本スタイル

スライドの画像は、img タグで表示していますが、これには object-fit:cover を与えるだけで画像の中心を基点にしてアスペクト比を保持したまま表示エリアを常に覆う状態で表示させることができます。

.slide{
  figure{
    height:100%;
    img{
      width: 100%;
      object-fit: cover;
    }
  }
}

なお、この便利な object-fit プロパティは、IE では利用できず、Edge では img タグのみにかろうじて有効です。

ブラウザ別 object-fit 対応状況

もはやマイクロソフト自身が「IE はもう使うな」と白旗をあげているような状態なので、IE は無視することとします。。

スライドを表示するときのスタイル

サムネイルナビゲーションのスライドをクリックし、対応するメインスライドを表示するには、:target 疑似プロパティを付けて表示させるための CSS を構成します。

/* アクティブなスライド */
.main-slider .slide:target{
  z-index:3; /* 最前面にする */
}

/* アニメーションで画像を表示 */
.main-slider .slide:target figure img{
  animation: show 2.2s ease forwards;
}