エンドレスでシームレスに画像を流してみます。
ここでは幅1920px、高さ360pxの画像を元に処理してみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
overflow: hidden;
background: #fff;
}
/* 表示領域 */
.wrapper {
width: 1920px;
/* 1枚分の幅
表示枠（1920×360px）＝1枚分のサイズ*/
height: 360px;
overflow: hidden;
/*position: relative;*/
margin: 0 auto;
position: absolute;
top:0;
}
/* スライダー全体
画像を4枚並べて「1→2→1→2」の順に配置*/
.slider {
display: flex;
width: 7680px;
/* (1920px × 4枚) →
image1, image2, image1, image2 */
animation: scroll 20s linear infinite;
/*一定速度で無限ループ、途切れのない動き*/
}
/* 各画像 */
.slider img {
width: 1920px;
height: 300px;
object-fit: cover;
}
/* アニメーション（左方向へ） */
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-3840px);
/* 全体の半分を動かす
translateX(-3840px) で2枚分（全体の半分）だけ動かす*/
}
}
/* アニメーション（右方向へ） */
/* @keyframes scroll {
0% {
transform: translateX(-3840px);
}
100% {
transform: translateX(0);
}
}*/
</style>
</head>
<body>
<div class="wrapper">
<div class="slider">
<img src="pic/image1.jpg" alt="">
<img src="pic/image2.jpg" alt="">
<img src="pic/image1.jpg" alt="">
<img src="pic/image2.jpg" alt="">
</div>
</div>
</body>
</html>
picフォルダーにimage1.jpg、image2.jpgを用意します。2つのファイルは同じ物ですが、両端はシームレスに繋がるように作成しています。
