Mill's Note
  1. HOME
  2. CSS
  3. CSS小技
  4. cssだけで作る無限スライダー 3種(コピペOK)

【CSS小技】cssだけで作る無限スライダー 3種(コピペOK)

/

cssだけで作るテキストも入れられる画像スライダー。

css だけなので軽くて調整も簡単。枚数の増減には計算が必要ですが、結構シンプルな css でいけちゃいます^^

共通コード

３種類とも同じコードをベースにして、アニメーション設定のみ変更しています。
使用する際は、それぞれのアニメーション下にある「アニメーション用css」を共通cssの下に追加すればOK ^^

共通コード
HTML code
<ul class="ani-demo"> /* アニメーションごとに ani-demo1,ani-demo2,ani-demo3… を足してクラス2重掛けに */
  <li><img src="dog1.jpg" alt=""></li>
  <li><img src="dog2.jpg" alt=""></li>
  <li>
    <img src="dog3.jpg" alt="">
    <span class="text">テキストも入れられます</span> /* wpはリストにpタグが入らない為、spanで挿入 */
  </li>
</ul>
CSS code
.ani-demo * { box-sizing: border-box; }
.ani-demo ul {
  position: relative;
  aspect-ratio: 5 / 3;
  list-style: none;
  width: 100%;
  max-width: 500px;
  padding: 0;
  margin: 0 auto 30px;
  overflow: hidden;
  border: solid 5px #000;
}
.ani-demo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ani-demo .text {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: block;
  width: 100%;
  padding: 10px;
  margin: 0;
  text-align: center;
  color: #fff;
  background-color: rgba(0,0,0,.75);
}
.ani-demo li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
/* この下にそれぞれのアニメーション用cssを記入 */

▲ コードの最初に戻る

CSSだけで作る無限スライダー【デモ&アニメーション用css】

デモは「START」で再生。3回再生すると停止するように設定しています。
再度確認される場合は、ブラウザを更新してください。

掲載コードは「無限再生」にしています。「START」ボタンの設定は載せていません。

CSS animation の説明はこちら

ani1 フワッと切り替わるタイプ

  • テキストも入れられます
アニメーション用css
CSS code
/* ul class="ani-demo ani-demo1" */
.ani-demo1 li { animation: 10s ease-in infinite; }
.ani-demo1 li:nth-child(1) { animation-name: ani1; }
.ani-demo1 li:nth-child(2) { animation-name: ani2; }
.ani-demo1 li:nth-child(3) { animation-name: ani3; }
@keyframes ani1 {
  0%     { opacity: 1; }
  16.65% { opacity: 1; }
  33.3%  { opacity: 0; }
  49.95% { opacity: 0; }
  66.6%  { opacity: 0; }
  83.25% { opacity: 0; }
  100%   { opacity: 1; }
}
@keyframes ani2 {
  0%     { opacity: 0; }
  16.65% { opacity: 0; }
  33.3%  { opacity: 1; }
  49.95% { opacity: 1; }
  66.6%  { opacity: 0; }
  83.25% { opacity: 0; }
  100%   { opacity: 0; }
}
@keyframes ani3 {
  0%     { opacity: 0; }
  16.65% { opacity: 0; }
  33.3%  { opacity: 0; }
  49.95% { opacity: 0; }
  66.6%  { opacity: 1; }
  83.25% { opacity: 1; }
  100%   { opacity: 0; }
}
CSS animation の説明はこちら

ani2 右から出て重なっていくタイプ

  • テキストも入れられます
アニメーション用css
CSS code
/* ul class="ani-demo ani-demo2" */
.ani-demo2 li { animation: 8s ease-in infinite; }
.ani-demo2 li:nth-child(1) {
  animation-name: ani21;
  z-index: 2
}
.ani-demo2 li:nth-child(2) {
  animation-name: ani22;
  transform: translateX(100%);
  z-index: 1;
}
.ani-demo2 li:nth-child(3) {
  animation-name: ani23;
  transform: translateX(100%);
  z-index: 1;
}
@keyframes ani21 {
  0%     { opacity: 1; transform: translateX(0); z-index: 2; }
  16.65% { opacity: 1; transform: translateX(0); z-index: 0; }
  33.3%  { opacity: 0; transform: translateX(0); z-index: 0; }
  49.95% { opacity: 0; transform: translateX(100%); z-index: 0; }
  66.6%  { opacity: 0; transform: translateX(100%); z-index: 0; }
  83.25% { opacity: 0; transform: translateX(100%); z-index: 2; }
  100%   { opacity: 1; transform: translateX(0); z-index: 2; }
}
@keyframes ani22 {
  0%     { opacity: 0; transform: translateX(100%); }
  16.65% { opacity: 0; transform: translateX(100%); }
  33.3%  { opacity: 1; transform: translateX(0); }
  49.95% { opacity: 1; transform: translateX(0); }
  66.6%  { opacity: 0; transform: translateX(0); }
  83.25% { opacity: 0; transform: translateX(100%); }
  100%   { opacity: 0; transform: translateX(100%); }
}
@keyframes ani23 {
  0%     { opacity: 0; transform: translateX(0); }
  16.65% { opacity: 0; transform: translateX(100%); }
  33.3%  { opacity: 0; transform: translateX(100%); }
  49.95% { opacity: 0; transform: translateX(100%); }
  66.6%  { opacity: 1; transform: translateX(0); }
  83.25% { opacity: 1; transform: translateX(0); }
  100%   { opacity: 0; transform: translateX(0); }
}
CSS animation の説明はこちら

ani3 右から左に動くタイプ

  • テキストも入れられます
アニメーション用css
CSS code
/* ul class="ani-demo ani-demo3" */
.ani-demo3 li { animation: 8s ease-in-out infinite; }
.ani-demo3 li:nth-child(1) {
  animation-name: ani31;
  z-index: 2
}
.ani-demo3 li:nth-child(2) {
  animation-name: ani32;
  transform: translateX(100%);
  z-index: 1;
}
.ani-demo3 li:nth-child(3) {
  animation-name: ani33;
  transform: translateX(-100%);
  z-index: 1;
  opacity: 0; 
}

@keyframes ani31 {
  0%     { opacity: 1; transform: translateX(0); z-index: 2; }
  16.65% { opacity: 1; transform: translateX(0); z-index: 2; }
  33.3%  { opacity: 1; transform: translateX(-100%); z-index: 1; }
  49.95% { opacity: 0; transform: translateX(100%); z-index: 1; }
  66.6%  { opacity: 0; transform: translateX(100%); z-index: 1; }
  83.25% { opacity: 1; transform: translateX(100%); z-index: 1; }
  100%   { opacity: 1; transform: translateX(0); z-index: 2; }
}
@keyframes ani32 {
  0%     { opacity: 0; transform: translateX(100%); z-index: 1; }
  16.65% { opacity: 1; transform: translateX(100%); z-index: 1; }
  33.3%  { opacity: 1; transform: translateX(0); z-index: 2; }
  49.95% { opacity: 1; transform: translateX(0); z-index: 2; }
  66.6%  { opacity: 1; transform: translateX(-100%); z-index: 1; }
  83.25% { opacity: 0; transform: translateX(100%); z-index: 1; }
    100%   { opacity: 0; transform: translateX(100%); z-index: 1; }
}
@keyframes ani33 {
  0%     { opacity: 1; transform: translateX(-100%); z-index: 1; }
  16.65% { opacity: 0; transform: translateX(100%); z-index: 1; }
  33.3%  { opacity: 0; transform: translateX(100%); z-index: 1; }
  49.95% { opacity: 1; transform: translateX(100%); z-index: 1; }
  66.6%  { opacity: 1; transform: translateX(0); z-index: 2; }
  83.25% { opacity: 1; transform: translateX(0); z-index: 2; }
  100%   { opacity: 1; transform: translateX(-100%); z-index: 1; }
}
CSS animation の説明はこちら

コード説明

ul, li などの共通コード部分

ポイントだけ簡単に^^ 他はお好みで変更してください。

ulサイズを決めて overflow: hidden; にする
lih-100%,w-100% でサイズを ul に合わせ position: absolute; top: 0; left: 0; で重ねる
.textposition: absolute; bottom: 0; で画像下部に配置

htmlやテンプレートに直接載せるならli内に<p class="text"> で入れれば良いのですが、wp投稿は li にブロックレベルを入れさせてくれないのて、pタグだとエラーになります。

wp投稿の場合、画像はインライン画像で配置。テキストを入れる場合は「HTMLとして編集」にして <span class="text">で挿入します。(wp投稿でスライダーを入れる事はほぼないと思いますが^^;)

アニメーション用css

lianimation-name 以外のプロパティをまとめて設定
li:nth-child(n)@keyframes でタイミングを変える為、個別に animation-name を指定
@keyframes少し止まって見えるよう表示時を2個並ばせてから非表示に変化。li ごとに位置をずらす
z-index移動させる画像が下になよう設定。
アニメに入れるプロパティとしてはどうよ、って話もありますがそこは目をつぶって^^;

もっとスマートなやり方もあると思いますが、、、
@keyframes を同じ仕様にしてタイミングだけを変えると、liごとの設定が分かりやすくなると思います。

画像を3枚にしたので、タイミング行は ( 3 × 2 = 6 ) 100%を足して合計7行。

それぞれのタイミングを ( 100% ÷ 6 = 16.6666… → 多少のずれには目をつぶって 16.5% にしています ) を 0% から加算して最後を100%に。

4枚にしたければ、 @keyframes を2行追加 ( 100% ÷ 8 = 12.5% ) にして100%まで加算していけばOKです^^

CSS animation の説明はこちら