横方向に流れ続けるスライドを実装する

横方向に要素をスクロールし続けるという実装をすることがたまにあるので、CSSを使った実装方法をメモしておきます。

サンプルコード

まずはHTMLです。
.x-scroll_innerが横にスクロールする要素になります。

<div class="x-scroll">
  <div class="x-scroll_inner">
    <div class="x-scroll_block">
      <div class="x-scroll_item">1</div>
      <div class="x-scroll_item">2</div>
      <div class="x-scroll_item">3</div>
      <div class="x-scroll_item">4</div>
      <div class="x-scroll_item">5</div>
    </div>
    <!-- ループ・画面幅が広い時用に同じ内容を適宜複製 -->
    〜 略 〜
  </div>
</div>

.x-scroll_block内にスクロールで使用する要素を全て格納して、ループして流す用に最低1つ以上複製します。
.x-scroll_blockの内容が少ない場合、画面幅が広い時に足りない場合があるので適宜複製を増やしてください。

次にCSSです。

.x-scroll {
	width: 100%;
	overflow: hidden;
}
.x-scroll_inner {
	display: flex;
	animation: 15s linear infinite xScroll;
}
@keyframes xScroll {
	0%     { transform: translateX(0);}
	100% { transform: translateX(-1700px);} /* .x-scroll_block 1つ分の幅だけ動かす */
}
.x-scroll_block {
	display: flex;
	width: 1700px; /* (320px + 20px) + 5 */
}
.x-scroll_item {
	width: 320px;
	height: 180px;
	margin: 10px;
}

.x-scroll_blockには内容量に応じてwidthに固定幅を指定、その固定幅分だけ.x-scroll_innerをanimationで動かします。
横方向へのスクロールのループのデモページ

このエントリーをはてなブックマークに追加

関連記事

3件のコメント

  1. すすむ より:

    さきほど1番のコメントを書いたものです。

    コメントの訂正とお詫びになります。
    こちらのソースコードではJavaScriptも使用していなかったですね。
    HTMLとCSSだけならなおさら使用しやすいコードです。
    勘違いしました。すいません。

    • cly7796.net より:

      すすむさん
      コメントありがとうございます。
      お役に立てたようでよかったです。

  2. すすむ より:

    はじめまして。

    横スライドのスライドショーを探してたどり着きました。
    さがしてもjQueryだのslickだのとなかなかJavaScriptだけのものがなく
    ネットもダウンロードもままならない環境もあるんで

    この方法ならできそうです。助かりました。

すすむ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31