JavaScriptのスライドショー作成について

Question

JavaScriptで画像が自動で変わるスライドショーを作成しています。
ボタンをWebサイト上でクリックして秒数の間隔を1～10秒まで変更したいです。

しかし、スムーズにスライドショーが作動せずしばらく止まっていたり、突然動いたりします。
また、秒数のボタンを1または10までクリックするとそれ以上の動かせなくなります。
※エラーメッセージは出ていません。

changeTimeイベントのところが間違っていると思うのですが
どなたか教えていただけると幸いです。
よろしくお願いいたします。

該当のソースコード

<script>
'use strict';

const images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg', 'images/image4.jpg', 'images/image5.jpg'];

let count = 0;
pageNum();
function changeimage(){
  if( count >= images.length){                                       // カウントが画像数よりも大きくなったら0番に戻す
    count = 0;
  }else{
    document.getElementById('main_image').src = images[count];      // 対象要素の画像URLを次の画像のURLに切り替える
    pageNum();
    count++;
  }
};

let num=3;
let time=0;
secNum();
function changeTime(time){                      //間隔を変更
        if(num>1&&num<10){
            num+=time;
            setInterval(changeimage, 1000*num);
        }
};

function pageNum(){
	document.getElementById('page').textContent = `ページ${count+1}/${images.length}`;            //何枚目の画像か表示
}
function secNum(){
	document.getElementById('sec').textContent = `${num}秒`;                                     //何秒か表示
}

document.getElementById('minus').onclick = function(){              //秒数を減らす
	changeTime(-1);
    secNum();
};
document.getElementById('plus').onclick = function(){               //秒数を増やす
	changeTime(1);
    secNum();
};


</script>

Answer 1

前のsetIntervalをクリアせず実行することになり、関数changeimageを何度も登録しているからだと思います。

【window.clearInterval - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearInterval

また、スライドショーを実装するだけの目的であれば Swiper 等のライブラリを使用するのが手早いと思います。