HTML + CSSだけで動くスライドショー（JSなし）

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

画像がずらっと並んだカルーセルスライダー的なのではなく、画像を1枚ずつ表示するタイプのスライドショーです。

画像を4枚を表示する想定で作成しています。

CSSの解説

コードを見る

余計な装飾を省いています。

HTML

<div class="slide-show">
  <img src="">
  <img src="">
  <img src="">
  <img src="">
</div>

CSS

/*** スライドショー ***/
.slide-show{
  position: relative; /*子要素の起点*/
  margin: 0 auto; /*中央配置*/
  width: 640px; /*任意の幅*/
  height: 360px; /*任意の高さ*/
  overflow: hidden; /*外側要素の非表示*/
}
 
/*** スライド(画像) ***/
.slide-show > img{
  position: absolute;
  top: 0;
  left: 100%; /*右側へ隠す*/
  width: 100%;
  height: 100%;
  animation: slide 20s linear forwards infinite; /*スライドアニメーション（ループ）*/
}
/*1枚目*/
.slide-show > img:nth-of-type(1){
  animation: slide 20s linear forwards infinite, slide-start 20s linear; /*2つのアニメーション*/
}

/*** 2枚目移行は 1/4時間ずつ遅らせる ***/
.slide-show > img:nth-of-type(2) {
  animation-delay: 5s; /* 1/4の遅延 */
}
.slide-show > img:nth-of-type(3) {
  animation-delay: 10s; /* 2/4の遅延 */
}
.slide-show > img:nth-of-type(4){
  animation-delay: 15s; /* 3/4の遅延 */
}


/*** スライドアニメーション ***/
@keyframes slide{
  0% {
    left: 100%; /*右*/
  }
  3%, 25%{ /*画像が4枚なので 1/4 まで*/
    left: 0; /*表示*/
  }
  28%,100%{
    left: -100%; /*左*/
  }
}


/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start{
  0%,25%{
    left: 0; /*表示*/
  }
  28%,100%{
    left: -100%; /*左へ隠す*/
  }
}

overflow: hiddenを指定した親要素の外に画像を配置しておき、以下の動作を時間差で各画像に適用させます。

右から画像をスライドさせて登場 → 一定時間待機 → 一定時間後に左へスライドして退場

親要素 .slide-show
- 任意のサイズを指定
- 子要素（画像）の起点にするため、position: relativeを指定
- overflow: hiddenで範囲外の要素を隠す（重要）
子要素 img（共通）
- position: absoluteを使い、表示範囲の右側left: 100%へ配置（共通）
- スライドアニメーションanimation: slide 20s linear forwards infinite を指定する
  （アニメーション名｜時間｜直線移動｜終了時維持｜ループ）
1枚目のみ2つのアニメーションを指定 img:nth-of-type(1)
- スライドアニメーション slide
- 画面表示時のアニメーション slide-start
  これがないと最初に空白が表示される
2枚目以降は開始を遅らせる img:nth-of-type(2)~(4)
- animation-delay: 全体の1/4時間で遅延時間を指定
スライドアニメーション slide
- 0%：表示範囲より右 left: 100%
- ~3%：表示範囲へスライド left: 0
- ~ 25%：そのまま待機 left: 0
  （ここで次の画像もアニメーション開始）
- ~28%：範囲より左へ left: -100%
  （ここで次の画像がスライドしてくる）
- 100%：そのまま待機 left: -100%
画面表示時のアニメーション slide-start（1枚目の初回だけ）
- ~25%：範囲内に表示しておくleft: 0
- ~28%：範囲の左へスライドleft: -100%

画面表示時から左→右のスライドを最初から行ってしまうと、最初に何もない空間から画像がスライドされます。それを避けるために1枚目の画像に1回だけ slide-startアニメーションを適用させます。
ただし、2周目以降は通常のスライド slide をさせたいので、animationをコンマで分けて2つとも指定します。
（slide-startを後ろに書きましょう）

画像の枚数を変更する場合

画像 (img) の数を増やす・減らす場合は、アニメーションの時間などを変更する必要があります。

(変更箇所)
・animation の指定時間を「枚数 × 5秒」に（例：10枚なら50s）
・2枚目以降の animation-delay は5秒ごと
・アニメーションの left: 0 の時間を「100% / 枚数」に（例：10枚なら10%まで）

下記に例としていくつか枚数を変えた場合のCSSを記載しておきます。

画像が2枚の時のCSS

/*** スライドショー ***/
.slide-show{
  position: relative; /*子要素の起点*/
  width: 640px; /*任意の幅*/
  height: 360px; /*任意の高さ*/
  margin: 0 auto;
  overflow: hidden; /*外側要素の非表示*/
}
 
/*** スライド ***/
.slide-show > img{
  position: absolute;
  top: 0;
  left: 100%; /*右側へ隠す*/
  width: 100%;
  height: 100%;
  animation: slide 10s linear forwards infinite; /*時間は 枚数×5s */
}
/*1枚目*/
.slide-show > img:nth-of-type(1){
  animation: slide 10s linear forwards infinite, slide-start 10s linear; /*2つのアニメーション*/
}

/*** 2枚目移行は 1/2時間遅らせる ***/
.slide-show > img:nth-of-type(2) {
  animation-delay: 5s; /* 1/2の遅延 */
}


/*** スライドアニメーション ***/
@keyframes slide{
  0% {
    left: 100%; /*右*/
  }
  3%, 50%{
    left: 0; /*表示*/
  }
  53%,100%{
    left: -100%; /*左*/
  }
}


/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start{
  0%,50%{
    left: 0; /*表示*/
  }
  53%,100%{
    left: -100%; /*左へ隠す*/
  }
}

画像が3枚の時のCSS

/*** スライドショー ***/
.slide-show{
  position: relative; /*子要素の起点*/
  width: 640px; /*任意の幅*/
  height: 360px; /*任意の高さ*/
  margin: 0 auto;
  overflow: hidden; /*外側要素の非表示*/
}
 
/*** スライド ***/
.slide-show > img{
  position: absolute;
  top: 0;
  left: 100%; /*右側へ隠す*/
  width: 100%;
  height: 100%;
  animation: slide 15s linear forwards infinite;
}
/*1枚目*/
.slide-show > img:nth-of-type(1){
  animation: slide 15s linear forwards infinite, slide-start 15s linear; /*2つのアニメーション*/
}

/*** 2枚目移行は 1/3時間ずつ遅らせる ***/
.slide-show > img:nth-of-type(2) {
  animation-delay: 5s; /* 1/3の遅延 */
}
/*3枚目*/
.slide-show > img:nth-of-type(3) {
  animation-delay: 10s; /* 2/3の遅延 */
}


/*** スライドアニメーション ***/
@keyframes slide{
  0% {
    left: 100%; /*右*/
  }
  3%, 33.333%{ /*画像が3枚なので 1/3 まで*/
    left: 0; /*表示*/
  }
  36.333%,100%{
    left: -100%; /*左*/
  }
}


/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start{
  0%,33.333%{ /*画像が3枚なので 1/3 まで*/
    left: 0; /*表示*/
  }
  36.333%,100%{
    left: -100%; /*左へ隠す*/
  }
}

画像が5枚の時のCSS

/*** スライドショー ***/
.slide-show{
  position: relative; /*子要素の起点*/
  width: 640px; /*任意の幅*/
  height: 360px; /*任意の高さ*/
  margin: 0 auto;
  overflow: hidden; /*外側要素の非表示*/
}
 
/*** スライド ***/
.slide-show > img{
  position: absolute;
  top: 0;
  left: 100%; /*右側へ隠す*/
  width: 100%;
  height: 100%;
  animation: slide 25s linear forwards infinite;
}
/*1枚目*/
.slide-show > img:nth-of-type(1){
  animation: slide 25s linear forwards infinite, slide-start 25s linear; /*2つのアニメーション*/
}

/*** 2枚目移行は 1/5時間ずつ遅らせる ***/
.slide-show > img:nth-of-type(2) {
  animation-delay: 5s; /* 1/5の遅延 */
}
/*3枚目*/
.slide-show > img:nth-of-type(3) {
  animation-delay: 10s; /* 2/5の遅延 */
}
/*4枚目*/
.slide-show > img:nth-of-type(4){
  animation-delay: 15s; /* 3/5の遅延 */
}
/*5枚目*/
.slide-show > img:nth-of-type(5){
  animation-delay: 20s; /* 4/5の遅延 */
}


/*** スライドアニメーション ***/
@keyframes slide{
  0% {
    left: 100%; /*右*/
  }
  3%, 20%{ /*画像が5枚なので 1/5 まで*/
    left: 0; /*表示*/
  }
  23%,100%{
    left: -100%; /*左*/
  }
}


/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start{
  0%,20%{
    left: 0; /*表示*/
  }
  23%,100%{
    left: -100%; /*左へ隠す*/
  }
}

カスタムプロパティを使っての一括指定を...と考えましたが、無理でした（笑）

応用CSS

拡大・縮小しながらスライド

スライドアニメーションと同時にtransform: scale()のスケール変化を追記して、拡大しながら登場・縮小しながら退場の動きを作ったもの。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

画像を表示するタイミングにtransform: scale(1)、退場する（範囲外の）タイミングにtransform: scale(0.1)を追記するだけです。