こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はカルーセルを使わず、画像を流れるように表示する方法をご紹介します。

実装例

HTML例

<div id="streaming-img">
  <h1>流れる画像</h1>
</div>

CSS例

#streaming-img{
  position: relative;
  background-image: url(/cp/wp/wp-content/uploads/2023/11/steaming-scaled.jpg);
  background-repeat: repeat-x;
  background-size: cover;
  width: 100%;
  height: 300px;
  border: 4px solid #000;
}
#streaming-img h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-75%);
  color: #fff;
  text-shadow: 0px 4px 2px rgba(0,0,0,0.3);
}

JavaScript例

let streamingImg = document.getElementById('streaming-img');
let bgx = 0;
let bgy = 0;
setInterval(function(){
  bgx += -0.5;
  bgy += 0;
  streamingImg.style.backgroundPosition = bgx + "px " + bgy + "px";
},10);

まとめ

ちなみに今回もjQueryではなく、Vanilla.jsで実装してみました。
コピペしてガンガン使ってください！