カールセルとは、画像や要素などをスライドして表示を切り替えるUIのこと。サイトトップページやプレゼンスライドなどを表示するのに使われることが多い。

このカールセルを、最近では scroll-snap を使うことで、CSSだけでカールセルを作れるようになり、各所で紹介されるようになってきた。

しかし、前後移動ボタンが実装されていることが少ないので、少しだけJavaScriptを使って実装してみた。

仕組みとしては、スクロール位置をカールセルの横幅分ずらすことで次に移動している。

// 次へボタンのクリックイベントを処理する
nextButton.addEventListener('click', function() {
  container.scrollLeft += container.offsetWidth;
});

ただこれだけでは移動するアニメーションがないので、ジャンプリンクなどでよく使われるscroll-behavior: smooth;を使って滑らかなスクロールを実現する。

.container {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth; /* スクロールを滑らかにする */
}

CSSだけでもジャンプリンクなどを使うことでボタンを実装することもできるが、Hack的なのでJSを使っていきたい。

また、全てJSを制御するのではなくscroll-snapを使うことで、スマホなどのタッチデバイスの対応が容易になり、スクロールジャックも不要になるのでアクセシビリティ的にも良いだろう。