CSSだけでスライダーを作る

さ / By
トップ背景

CSSだけでスライダーを作る

自動で画像が切り替わるスライダー（カルーセル）はよくみますね。

特にFV（ファーストビュー）やMV（メインビュー）、商品紹介などで使われることがあります。

今回、手動で動かすCSSだけでスライダーの実装を依頼されたので実装しました。

CSSだけでスライダーを作る方法を解説していきます。

基本HTML

<div class="wrap">
  <ul class="list">
   <li class="item">
    <img src="https://beiz.jp/images_S/sky/sky_00010.jpg" alt="">
    <p>テキスト</p>
   </li>
   <li class="item">
    <img src="https://photo53.com/img/sora12.jpg" alt="">
    <p>テキスト</p>
   </li>
   <li class="item">
    <img src="https://image.ganref.jp/photos/members/tramping/5af5095cde706756e020a274baa23b9f_3.jpg" alt="">
    <p>テキスト</p>
   </li>
  </ul>
</div>

よくあるスタイルです。

画像はフリーの「空」を使用しています。

CSSで装飾していきます

.wrap {
  // X軸にスクロールし、スクロールアクション終了後にスナップ位置に合わせる
  scroll-snap-type: x mandatory;
  margin: 0 auto;
  padding: 30px 0;
  min-width: 600px;
  // 行の折り返しをさせない
  white-space: nowrap;
  // X軸方向にスクロールさせる
  overflow-x: scroll;
}

.item {
  // スナップ位置を中央に指定
  scroll-snap-align: center;
  display: inline-block;
  margin-left: 10px;
  width: 30%;
  // wrapのwhite-space指定を解除
  white-space: normal;
  background-color: #f4f4f4;
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

p {
  margin: 0;
  padding: 20px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

解説していきます。

wrap内

scroll-snap-type: x mandatory; は、X軸にスクロールし、スクロールアクション終了後にスナップ位置に合わせます。

white-space: nowrap; は、行の折り返しをさせないようにします。

overflow-x: scroll; は、X軸方向にスクロールさせます。

これだけでも横スクロールしますが、縦並びのままです。

item内

display: inline-block; で、横並びになりますがスクロールしません。

そこで scroll-snap-align: center; でスナップ位置を中央に指定します。

そして white-space: normal; で、wrap の white-space 指定を解除します。

このままだと画像が縦長のままなので、画像の大きさを指定します。

img内

横幅は全体（600px）の30%と .item の中で指定しているので、img は100%にしても .item 以上にはなりません。

高さ auto にしています。

これで画像の大きさが整いました。

まとめ

CodePenで書くとこのようになります。

これはスマホサイズの425pxで見てもらえるとわかりやすいです。

というのも最大幅600pxですから、PCですと当然画面内に収まってしまいます。

See the Pen Untitled by 奥谷 晋司 (@itpyduhk-the-encoder) on CodePen.