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.