JavaScriptにてスマホ版とPC版で別の順番になる背景画像のスライドショーを作成したい

Question

タイトルのようなスライドショーを作るために配列を２つ用意し、それぞれのスマホ版とPC版で異なる画像を使った上で順番を配列内で変えて処理させようとしたのですが、順番通りに動かないどころかインデックスの0と2を行き来するような表示になってしまうのですが、これは何が原因なのでしょうか？
また、どっちか片方の処理だけを記述すれば正常に機能するため、何かがお互いに干渉しあっているとは思うのですが、仮説すら立てられず困っているので、ご教授願いたいです。

/ スライドショー関連
// 宣言
const images =[
  'img/image05.png',
  'img/image01.png',
  'img/image06.png',
  'img/image02.png',
  'img/image04.png',
  'img/image03.png'
];
const spImages =[
  'img/spimage03.png',
  'img/spimage01.png',
  'img/spimage04.png',
  'img/spimage02.png'
]
let counter =0;
const mainImage =document.getElementById('mainImage');
const spImage =document.getElementById('spImage');
// ページがロードされた際に行うイベント
window.addEventListener('load' , function slideChange(){
  if (counter == images.length-1){	// 最後の画像まで表示したのなら
    counter=0;	// 最初の画像に戻す
    mainImage.classList.add('fadein-out');
    setInterval(() => {
      mainImage.classList.remove('fadein-out')
    }, 1000);
  }
  else{	// 最後の画像まで表示していないのなら
    counter++;	// 次の画像へ
    mainImage.classList.add('fadein-out');
    setInterval(() => {
      mainImage.classList.remove('fadein-out')
    }, 1000);
  }	
  setTimeout( slideChange , 3000);	// 10秒周期に画像を更新する
  mainImage.src = images[counter];	// 次の画像を表示する
});
// スマホ版の処理
window.addEventListener('load' , function slideChange2(){	// 定期的に画像を更新する関数
  if (counter == spImages.length-1){	// 最後の画像まで表示したのなら
      counter=0;	// 最初の画像に戻す
      spImage.classList.add('fadein-out');
      setInterval(() => {
        spImage.classList.remove('fadein-out')
      }, 1000);
    }
    else{	// 最後の画像まで表示していないのなら
      counter++;	// 次の画像へ
      spImage.classList.add('fadein-out');
      setInterval(() => {
        spImage.classList.remove('fadein-out')
      }, 1000);
    }	
    setTimeout( slideChange2 , 3000);	// 10秒周期に画像を更新する
    spImage.src = spImages[counter];	// 次の画像を表示する )
    });

Answer 1

単純に、PC版とスマホ版の関数が、同時に実行されてしまう構文だからです。
PCならば、slideChange、スマホならslideChange2を実行するようにすれば、うまく行くかと。
addEventListenerは読んで字の如く、
処理を追加するメソッドのため、今回のような重複処理が起きるのかと。

Answer 2

下記のように処理を分ければいいと思います。
スマホかどうかは画面サイズを取得して判定できます。

if(スマホ){
　// スマホでの処理
}　else {
 // スマホ以外で行いたい処理
}

Comments

[kakedashi009]

ありがとうございます。
同じような発送でmatchmadiaメソッドを使って実現することができました。

[miyabi_pudding]

画面サイズだけの判別だと、
高解像度のスマホの振り分けが難しくなりますので、
ユーザーエージェントでの振り分けの方がいいかと思います。