この記事は2018年5月11日に書かれたもので、内容が古い可能性がありますのでご注意ください。
WEBサイトで定番のスライダーはjQueryで動かしていますが、
他コンテンツの干渉が原因で、どうしてもjQueryを使わずにスライダー(カルーセル)風のコンテンツを作りたいという方におすすめのソースを紹介します。
スライダー・カルーセル・クロスフェードの関連記事はこちらをご覧ください。
【jQuery】レスポンシブ対応のカルーセルは「slick」がおすすめ
クロスフェード用自作サンプルコード
もちろん今回はjavascriptは使いません。HTMLとCSSのみです。
HTML
<div class="slider"> <div>1つ目の要素</div> <div>2つ目の要素</div> <div>3つ目の要素</div> </div>
.slider > divの中に任意の要素を入れてください。
CSS
.slider { overflow-x: scroll; -webkit-overflow-scrolling: touch; white-space: nowrap; } .slider > div { margin: 0 3px; display: inline-block; width: 32%; }
overflow-x: scroll;で横スクロールが出来るようになります。
-webkit-overflow-scrolling: touch;は慣性スクロールといって、スマホなどのタッチデバイスでスクロールして指を離すとスムーズに(ぬるっと?)止まるプロパティです。
横スクロールはスクロールバーが昔っぽくてダサイし、止まる時はピタッと止まって粗い感じが出るから嫌…という意見もあると思います。(というか私もそう思っていました)
しかし、スマホに関しては慣性スクロールがあれば止まる時に上品さが出ますし、スクロールバーのデザインもそんなに気にならないので、現在でも使えるいい手法だと思いました。
横にスルスル動かせて操作性もいいです。
完成形のデモはこちらです。