制作のご相談はこちら
【スマホ対応】jQueryを使用しない横スクロールタイプのスライダー

公開日 : 2018年05月11日

【スマホ対応】jQueryを使用しない横スクロールタイプのスライダー


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;は慣性スクロールといって、スマホなどのタッチデバイスでスクロールして指を離すとスムーズに(ぬるっと?)止まるプロパティです。

横スクロールはスクロールバーが昔っぽくてダサイし、止まる時はピタッと止まって粗い感じが出るから嫌…という意見もあると思います。(というか私もそう思っていました)
しかし、スマホに関しては慣性スクロールがあれば止まる時に上品さが出ますし、スクロールバーのデザインもそんなに気にならないので、現在でも使えるいい手法だと思いました。
横にスルスル動かせて操作性もいいです。

完成形のデモはこちらです。

横スクロールタイプのスライダー(カルーセル)完成形