CSSだけで作るレスポンシブ対応「無限ループスライダー」(コピペOK)

HTMLとCSSだけで自動で動き続けるループSlider。

画像枚数、サイズ、スビート、カスタマイズ自在。途中で止めたり、リンクやテキストも入れられるスライダーです。

横幅%指定なのでレスポンシブもOK。ブレークポイントで高さ調整すればよりイメージ通りにできるかも? ^^;

CSSだけで動かしているから、とっても軽い!!
コードもシンプルなので、カスタマイズも簡単ですよ~^^v

Demo

これが出来上り^^

テキストも入れられます^^

html

画像を入れた2個のBOX(ul) にアニメーションかけ、移動のタイミングを変える事で切れ目なくループするようにしています。
checkbox で「動く」「止める」を制御します。

HTMLコード(コピペOK)

<div class="slider-box">
  <input type="checkbox" id="slider-check" class="slider-check">
  <div class="loop-box">
    <ul class="loop1">
      <li><img src="img/1872-1.jpg" alt=""></li>
      <li><img src="img/1872-2.jpg" alt=""></li>
      <li><img src="img/1872-3.jpg" alt=""></li>
    </ul>
    <ul class="loop2">
      <li><img src="img/1872-4.jpg" alt=""></li>
      <li>テキストも入れられます^^</li>
      <li><img src="img/1872-6.jpg" alt=""></li>
    </ul>
  </div>
  <div><label for="slider-check" class="slider-label"></label></div>
</div>

HTML カスタマイズと注意点

<ul class=”loop●”> を増やしてはいけません
<li>(画像など)</li> は必ず【 loop1とloop2に追加】します
<ul class=”loop1″>,<ul class=”loop2″>
<li>(画像など)</li>は何個でも入れられますが
必ず 【 loop1とloop2の<li>~</li>が同じ個数】 になるようにしてください
<li>(画像など)</li>の数を変えた場合は、必ず【 CSS 56行・64行を修正 】してください
画像の縦横は問いませんが、cssでの設定により
- 縦長画像は上下がカットされます
- 設定より横長の場合は上下に余白が入ります
- 元画像のサイズに関わらず、画像はcssで設定したサイズに拡大縮小されます。
画像ごとに自由にリンクをかけられます^^

CSS

以下の CSS で見た目やスライダーのループアニメーションを制御しています。

変更箇所可能箇所はソースに入れています。
下の CSS カスタマイズと注意点にある変更方法や注意も併せてご覧くださいね^^

CSSコード(コピペOK)

/* 1.親スタイルリセットとペース設定 ++++++++++ */
.slider-box p, .slider-box div, .loop-box ul, .loop-box li {
  box-sizing: border-box; margin: 0 !important; padding: 0 !important;
}

/* 2.ベースBOXの設定 +++++++++++++++++++++ */
.slider-box {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%; /* 画面又は親要素に対するサイズ - 変更可 */
  background: #333; /* 背景色 - 変更可・削除可 */
  border: solid 5px #ccc; /* 囲み線 - 変更可・削除可 */
  margin: 0 auto; /* Box外の余白 - 変更可 */
  padding: 10px 0 0; /* 上端からスライダーまでの距離 - 変更可・削除可 */
}

/* 3.チェックボックスを利用した停止・再生などの設定 +++++++++++++++++ */
.slider-check {
  display: none;
}
.slider-check:checked ~ .loop-box > .loop {
  animation-play-state: paused;
}
.slider-label {
  display: block;
  cursor: pointer;
  color: #fff; /* 文字色 - 変更可 */
  font-size: 24px; /* 文字サイズ - 変更可 */
  line-height: 2; /* ボタン部分の高さ - 変更可 */
  text-align: center;  
}
.slider-label::before {
  content: "\025a0  STOP"; /* 停止テキスト - 変更可 */
  } 
.slider-check:checked ~ div > .slider-label::before {
  content: "\025b6  MOVE"; /* 再生テキスト - 変更可 */
}

/* 4.スライダー本体とアニメーションの基本設定 ++++++++++++++ */
.loop-box{
  position: relative;
  width: 100%;
  overflow: hidden; 
}
.loop-box, .loop-box ul {
  height: 300px; /* スライダーの高さ - 変更注意 */
}
.loop-box ul {
  position: absolute; left: 0; top: 0;
  display: flex; 
  justify-content: space-between;
  background: #000; /* スライダーの背景色 - 変更可 */
  list-style: none;
  max-width: 10000%; 
  min-width: 100%;
  width: calc(300px * 1.5 * 3); /* 画像の横幅×枚数 - 変更注意・変更可・変更注意 */
  animation: 15s linear infinite; /* アニメーション設定 - 変更可 */
}
.loop-box li {
  display: flex;
  align-items: center; 
  justify-content: center;
  color: #fff;
  width: calc(100% / 3); /* li の幅を均等にする - 削除可・変更注意 */
}
.loop-box img {
  height: auto;
  width: 100%;
}

/* 5.アニメーション個別設定 ++++++++++ */
.loop-box ul.loop1 {
  animation-name: loop1;
}
.loop-box ul.loop2 {
  animation-name: loop2;
}
@keyframes loop1 {
  0% {transform: translateX(0); }
  49.99999% {transform: translateX(-100%); }
  50% {transform: translateX(100%); }
}
@keyframes loop2 {
  0% {transform: translateX(100%); }
  100%{transform: translateX(-100%); }
}

CSSカスタマイズと注意点

変更可 ⇒ 自由に変更可能です
削除可 ⇒ 設定が不要であれば削除OKです
変更注意 ⇒ 同色2ヵ所に同じ内容を設定します
変更注意 ⇒ 同色2ヵ所に同じ内容を設定します
※ それぞれ2ヵ所の内容が異なると表示がおかしくなりますのでご注意ください

1.リセットとベース設定

この部分はこのまま載せて下さい
親スタイルなどが被っていたりして想定通りに動かない場合がありますので、一旦リセットしてペース設定をしています。

2.ベースとなるBOX

box-sizing: border-box;
overflow: hidden;

8行目、9行目 ⇒ 消してはいけません!!
以下の行は、ソース上のコメントに合わせ、自由に変更または削除(削除可のみ)して頂けます^^

width: 100%;

10行目 ⇒ 親要素、又は、画面一杯になるように100%にしています。必要に応じて変更してください

3.チェックボックスを利用した挙動

.slider-label { ～ ～ ～ }

24行目～37行目 ⇒ [ ラベル (再生停止ボタン) ] に関する事を設定しています。
ソース上のコメントに合わせ、見た目を自由に変更して頂けます^^

4.スライダー本体とアニメーションの基本設定

この部分は注意が必要です。
設定を間違えると「スライダーにならない」「ループしない」「動きがおかしい」「表示がおかしい」「表示されない」といった事が起きますので十分注意してカスタマイズしてくださいm(__)m

  height: 300px;

46行目 ⇒ スライダーの高さを設定しています。(56行目にも同じサイズを入れます)

  width: calc(300px * 1.5 * 3);

56行目 ⇒ .loop-box ul の幅を設定しています。

300px(高さ) × 1.5(高さに対する横幅の比率) × 3(ul 内にある li の数)
1.5(高さに対する横幅の比率) ⇒ <li>を横長にしたいなら数値を大きく、正方形の画像を使うなら 1 にするなど調整してください。
3(ul 内にある li の数) ⇒ 1つの ul の子要素 li の数です。登録する画像幅の違いに関わらず、li の幅を均一に表示したい場合は、64行目に同じ数値を入れます。

※比率の異なる画像は一部カットしたり余白を入れて枠内に収めますので、[画像]と[横幅の比率]が極端に違うと想定通りの見え方になりません。
※出来るだけ掲載する画像のサイズを統一し、横比率を計算して入れるのが一番きれいです。