JavaScriptは適切に利用することが大事！HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる

Post on:2017年10月17日

Step 1: 最初にセマンティックなマークアップ

スライダーの各スライドの実装は、下記のように簡単です。

<div class="slider">
  <div class="slide" id="slide-1"></div>
  <div class="slide" id="slide-2"></div>
  <div class="slide" id="slide-3"></div>
  <div class="slide" id="slide-4"></div>
  <div class="slide" id="slide-5"></div>
</div>

</div>

Step 2: flexboxを使ってスライダーを実装

flexboxを使用すると、数行のCSSで各スライドを互いに隣り合わせて配置し、スクロールさせることができます。

.slider {
  width: 300px;
  height: 300px;
  display: flex;
  overflow-x: auto;
}
.slide {
  width: 300px;
  flex-shrink: 0;
  height: 100%;
}

.slider {

width: 300px;

height: 300px;

display: flex;

overflow-x: auto;

}

.slide {

width: 300px;

flex-shrink: 0;

height: 100%;

}

ここまでの実装で、下記のようになります。

flexboxの実装は、下記が詳しいです。

CSS3 Flexbox の各プロパティの使い方を詳しく解説

Step 3: スマホの操作に対応

Webkitベースのブラウザで、スワイプ操作ができるように指定します。

.slider {
  ...

  -webkit-overflow-scrolling: touch;
}

.slider {

...

-webkit-overflow-scrolling: touch;

}

スワイプ操作で、するするスクロールさせることができます。

Step 4: スナップするポイントを設定

各スライドをスナップポイントで所定の場所にスナップさせます。

.slider {
  ...

  -webkit-scroll-snap-points-x: repeat(300px);
      -ms-scroll-snap-points-x: repeat(300px);
          scroll-snap-points-x: repeat(300px);
  -webkit-scroll-snap-type: mandatory;
      -ms-scroll-snap-type: mandatory;
          scroll-snap-type: mandatory;
}

.slider {

...

-webkit-scroll-snap-points-x: repeat(300px);

-ms-scroll-snap-points-x: repeat(300px);

scroll-snap-points-x: repeat(300px);

-webkit-scroll-snap-type: mandatory;

-ms-scroll-snap-type: mandatory;

scroll-snap-type: mandatory;

}

これで操作が快適になります。

Step 5: ジャンプリンクの設定

スライダーはおそらく特定のスライドにジャンプするための小さなUIを持っているので、正しいスライドにジャンプするアンカーリンクを実装します。

<div class="slide-wrap">
  
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
  <a href="#slide-3">3</a>
  <a href="#slide-4">4</a>
  <a href="#slide-5">5</a>

  <div class="slider">
    <div class="slide" id="slide-1">1</div>
    <div class="slide" id="slide-2">2</div>
    <div class="slide" id="slide-3">3</div>
    <div class="slide" id="slide-4">4</div>
    <div class="slide" id="slide-5">5</div>
  </div>
  
</div>

</div>

関連するコンテンツやセマンティックなものへのリンクとして実際に動作するリンクをアンカーにするので、問題はありません。

スライダーの上に、アンカーリンクを配置します。

Step 6: よりスムーズな動きにする

デスクトップでもスマホでも、スライダーの動きがよりスムーズになるようにします。

.slides {
  ...
  
  scroll-behavior: smooth;
}

.slides {

...

scroll-behavior: smooth;

}

Step 7: 必要ない場合は非表示に

ブラウザが「scroll-snap-type」をサポートしている場合はスナップするので、ボタンを非表示にしておきます。

@supports (scroll-snap-type) {
  .slider > a {
    display: none;
  }
}

@supports (scroll-snap-type) {

.slider > a {

display: none;

}

Step 8: 演出を加える

スライドがアクティブな時、演出を加えてみます。
スライドをナビゲートするボタンの1つがクリックされると、URLは#hashに変わり、その時に「:target」が有効になります。

.slides > div:target {
  transform: scale(0.8);
}

.slides > div:target {

transform: scale(0.8);

}

アクティブ時にスケールを変更するエフェクトを加えました。

チェックボックスのハックを使って、このエフェクトを実装することもできます。しかし、その実装はセマンティックでも、アクセシブルでもありません。

Step 9: スライダーの完成

これでスライダーが完成しました。
実装は、下記ページで確認できます。

See the Pen Real Simple Slider by Chris Coyier (@chriscoyier) on CodePen.

HTMLとCSSで実装した時の限界

「:target」を使う実装はきちんとしたテクニックですが、例えば、ページがハッシュなしで読み込まれた場合はうまくいきません。また、ユーザーがボタンを使用せずにスクロールまたはフリックした場合も同じです。私は、HTMLとCSSだけでこれを回避する方法はないと思いますし、HTMLとCSSの完全な失敗ではないと思います。それはJavascriptの領域です。

JavaScriptはアクティブなスライドが何であるかを知ることができ、アクティブなスライドを設定できます。Intersection Observer APIを使うと簡単です。
参考: 要素がビューポートに表示されているかを判定できる -Intersection Observer

ほかに制限はありますか？

ここではHTMLとCSSでどこまでできるのか、試してみました。

マウスでフリックできるようにしたいですか？
それはマウスの標準的な動作ではないため、DOMイベントを使用してJavaScriptで実装する必要があります。
スライドが変更されたときを知りたいですか？コールバックのように？
それはJavaScriptの領域です。
自動再生が必要ですか？
チェックボックスをチェックして、@keyframesでアニメーションを制御することで、初歩的な何かを行うことができるかもしれませんが、限定的な対応になります。
無限に一方向にスクロールさせ、必要に応じて繰り返しますか？
それは、DOM内でクローンを作成したり、物を動かしたりする必要があります。marqueeタグの誤用です。

私がここで言いたいことは、JavaScriptを必要とする前にできることがたくさんあるということだけです。ベースをしっかりすることで、あなたがその上に何をするにかかかわらず、素晴らしいフォールバックを提供することができます。