Jsで画像を横にベルトコンベアのようにスライドしていくようにしたい。

Question

前提・実現したいこと

画像を表示して、左へベルトコンベアのように流れるようにしたいです。画像は並べて表示できたのですが、画像を横に動かすことができません。camvasに表示させてみたのですが、動くようにはなりましたが、点滅のようになってしまい挙動がおかしくなってしまいました。どなたか助言をいただけると嬉しいです。

発生している問題・エラーメッセージ

画像が点滅する。

該当のソースコード

      <div id="screen_box" width="100%" >
      <canvas id="screen" ></canvas>
    </div>

"use strict"
// 全体で使用する変数を定義
var canvas, ctx;
// プレイヤーの画像を保持する変数を定義
var img_player;
var interval =500;
// ページロード時に呼び出される処理を指定
window.onload = function() {
    // コンテキストを取得（おまじない）
    canvas = document.getElementById('screen');
    ctx = canvas.getContext('2d');
    //横幅取得。指定。CSSだと画像ゆがむ
    var container = document.getElementById('screen_box');
    canvas.width = container.clientWidth;

    //canvasグラフィックを描くためのコンテキストオブジェクトを取得する.

    let ga = [
      './images/pan4.png',
      './images/pan2.png',
      './images/pan3.png',
      './images/pan1.png',
    ];
    ga=ga.concat(ga);
    for(let i = 0 ; i < ga.length ; i++ ){
      
      let x = 120*i; //letだと何故かばらけるvarだとかさなる。
      let img_i = new Image();
      img_i.setAttribute('src', ga[i]);


      img_i .addEventListener('load',function(){
      
      });

      (function timer(){
        setTimeout(function(){
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          x -= 20 ;
          ctx.drawImage(img_i, x, -20, 200,200);
    
         
         timer();
        },1000);
      })();
    };
};

試したこと

styleで一定時間ごとにleftのpxを減らす。
canvasに表示させる。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

この方のサイトが参考になりますか？

https://chocolat5.com/tips/loop-image-animation/#css%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E4%BD%9C%E3%82%8B%E7%84%A1%E9%99%90%E3%83%AB%E3%83%BC%E3%83%97%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B31%EF%BC%88%E6%A8%AA%E9%95%B7%E3%81%AE%E7%94%BB%E5%83%8F%EF%BC%89

Comments

[mogumogu22]

回答ありがとうございます！
CSSでも出来るんですね！
ただ、Jsでできるように出来たらよりいいなと思いますので、そちらも参考にさせていただきながら、もう少しねばってみたいと思います。
ですが、やりたいことはこれでできそうなのでとても参考になりました。
ありがとうございました^^

[NEO_PLANETT-777]

プラグインOKですか？
Swiperってのがありますが？

この方のサイトで詳しく説明してます。
https://haniwaman.com/swiper/

[mogumogu22]

Jsの勉強をしたくて作っているとこもあるので、今のところはプラグインなしで頑張りたいと思います。でも、教えてくださってありがとうございました。

Answer 2

http://oekakirenn.webcrow.jp/index.html　このサイトを参考にさせていただきました。