html と CSS だけで　カルーセルを作成

【WordPressで使える】ずっと右から左へ流れ続ける画像スライダーアニメーションの作り方【追加CSSのみ】

上記記事を別ウィンドウで記事を開く
上の記事は、非常にわかりやすく、またコピペで、CSSとHTMLだけで「カルーセル」が作成できる。

ただ、サンプルデータでは扱う画像数が多く、今回設置するカルーセルの画像枚数は少ない。
CSSの animation: と　@keyframes で、設定を動きをコントロールする際、 サンプルデータのままでは、スクロールのスピードが遅すぎるため、下記の部分を修正した。（コメントアウト部分を↓の様に修正）

.slider1 ul:first-child {
/*	animation: slide1 150s -75s linear infinite;*/
                   ↓
	animation: slide1 80s -40s linear infinite;
}
.slider1 ul:last-child {
/*	animation: slide2 150s linear infinite;*/
                   ↓
	animation: slide2 80s linear infinite;
}

以下、カルーセル用CSS全文

/*カルーセル*/
.slider1 {
	display: flex;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	height:200px;
	overflow: hidden;
}
.slider1 ul{
	display:flex;
	padding: 0;
	margin:0;
}
.slider1 li{
	width:300px;
	list-style: none;
}
.slider1 ul:first-child {
	animation: slide1 80s -40s linear infinite;
/*	animation: slide1 150s -75s linear infinite;*/
}

.slider1 ul:last-child {
  animation: slide2 80s linear infinite;
/*  animation: slide2 150s linear infinite;*/
}
@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
	  transform: translateX(-200%);
  }
}

以下、カルーセル用のhtml

<div class="slider1">
  <ul>
    <li><img src="/wp-content/img/gin/gin_option-01.jpg"></li>
    <li><img src="/wp-content/img/gin/gin_option-02.jpg"></li>
    <li><img src="/wp-content/img/gin/gin_option-03.jpg"></li>
    <li><img src="/wp-content/img/gin/gin_option-04.jpg"></li>
    <li><img src="/wp-content/img/gin/gin_option-05.jpg"></li>
  </ul>
  <ul>
    <li><img src="/wp-content/img/gin/gin_option-01.jpg"></li>
    <li><img src="/wp-content/img/gin/gin_option-02.jpg"></li>
    <li><img src="/wp-content/img/gin/gin_option-03.jpg"></li>
    <li><img src="/wp-content/img/gin/gin_option-04.jpg"></li>
    <li><img src="/wp-content/img/gin/gin_option-05.jpg"></li>
  </ul>
</div>