DEMO

HTML

		<div class="slidshow2">
 <div class="slide2">
  <div class="slide2_con">
   <img class="slide2_2" src="画像1URL" alt="画像1">
   <img class="slide2_2" src="画像2URL" alt="画像2">
   <img class="slide2_2" src="画像3URL" alt="画像3">
  </div>
  <div class="slide2_con">
   <img class="slide2_2" src="画像1URL" alt="画像1">
   <img class="slide2_2" src="画像2URL" alt="画像2">
   <img class="slide2_2" src="画像3URL" alt="画像3">
  </div>
 </div>
</div>
		

HTML説明

画像の設定方法
「画像1～3URL（4~6.9~11行目）」のテキストを任意の画像URLに書き換えてください。
画像を増やす場合は <img class="slide2_2" src="画像URL" alt="画像"> の行を全てをコピーペーストで増やし、減らす場合は削除してください。
また、各URLは2か所ずつ（4と9・5と10・6と11行目）同じURLを入れてください。

CSS

		<style>
.slidshow2{
 width: 100%;
 max-width: 580px;
 overflow: hidden;
 margin: 0 auto;
}
.slide2 {
 width: 100%;
 display: flex;
 align-items: center;
 overflow: hidden;
}
.slide2_con {
 display: flex;
 animation: slide-flow 20s infinite linear 1s both;
}
.slide2_con img{
 max-width: none;
}
.slide2_2{
 width: 300px;
 object-fit:cover;
 border: 1px solid #ddd;
}
@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}
</style>
		

CSS説明

アニメーションの速度の変更方法
「秒数(現在20s)（16行目）」のテキストを任意の秒数に書き換えてください。