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

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

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

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

<div class="slider">
    <div>
        <a href="http://design.aekana.com/blog/css-mouseover-effect">
            <img loading="lazy" src="http://design.aekana.com/wp-content/uploads/2015/02/141208_img.png" width="289" height="292" alt="コピペでできるCSSボタンマウスオーバーエフェクト集">
        </a>
    </div>
    <div>
        <a href="http://design.aekana.com/blog/free-font-cursive">
            <img loading="lazy" src="http://design.aekana.com/wp-content/uploads/2017/11/171129.png" width="289" height="292" alt="手書き風がおしゃれ！読みやすい英語・筆記体フリーフォント">
        </a>
    </div>
    <div>
        <a href="http://design.aekana.com/blog/js-megamenu">
            <img loading="lazy" src="http://design.aekana.com/wp-content/uploads/2015/02/140915_img.png" width="289" height="292" alt="レスポンシブ対応、メガメニューを実装できるプラグイン「megamenu.js」の使い方">
        </a>
    </div>
    <div>
        <a href="http://design.aekana.com/blog/parts-fade-plugin-scrollreveal">
            <img loading="lazy" src="http://design.aekana.com/wp-content/uploads/2017/06/170623.png" width="289" height="292" alt="パーツごとにふわっと表示させるプラグイン「ScrollReveal」を設置してみる">
        </a>
    </div>
    <div>
        <a href="http://design.aekana.com/blog/icon-accordion-demo">
            <img loading="lazy" src="http://design.aekana.com/wp-content/uploads/2018/01/180104.png" width="289" height="292" alt="開閉アイコン付きアコーディオンサンプル作成しました ">
        </a>
    </div>
    <div>
        <a href="http://design.aekana.com/blog/css-slanting-obi">
            <img loading="lazy" src="http://design.aekana.com/wp-content/uploads/2018/02/180219.png" width="289" height="292" alt="CSSで斜めの背景帯を作る方法【レスポンシブ】 ">
        </a>
    </div>
</div>



.slider {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.slider > div {
    margin: 0 3px;
    display: inline-block;
    width: 32%;
}