フワッとフェードイン・アウトするスライドショーを作成したい。

Question

前提・実現したいこと

ホームページにおける、トップ画面のスライドショーを作成しています。
（一定時間経過したら、自動でフワッとフェードアウト・インする画面をjavascriptで作りたい。）

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

クラスの付与・除去が、２回に１回しか適用され無い。

エラーメッセージ

該当のソースコード

{
const images = [
'images/slide-0.png',
'images/slide-1.png',
'images/slide-2.png',
'images/slide-3.png',
'images/slide-4.png',
'images/slide-5.png',
];

let count = 0;
const slideImage =()=> {
    if(count >= images.length){
        count = 0;
    }else{
        document.getElementById('slideshow').src = images[count];
        count++;
        document.getElementById('slideshow').classList.add('active');
    }
    setTimeout(slideImage, 2000);
}
window.onload = slideImage;

}

javascript

試したこと

classListのところをtoggleに変えてみたところ、
当然ながら２回に１回しか動きが適用されませんでした。
タイミング的に、addをカウントが始まったところで記述して、
removeを、一定時間が経った後に適用されるように記載したいです。

アニメーションがついている、クラスの付与・除去を行うため、
activeで操作をしたいです。

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

visual studio code

Answer 1

前提として、jQuery等のライブラリを使用したほうが簡単に実装できるかと思います。

動作検証もしていませんが下記のようにfadeoutの関数も用意して、交互にsetTimeoutで呼出す実装はどうでしょうか。

let count = 0;
const slideImage =()=> {
    if (count >= images.length) {
        count = 0;
    } else {
        document.getElementById('slideshow').src = images[count];
        count++;
        document.getElementById('slideshow').classList.add('active');
    }
    setTimeout(fadeoutImage, 2000);
};
const fadeoutImage =()=> {
    let el = document.getElementById('slideshow');
    el.classList.remove('active');
    el.classList.add('fadeout');
    setTimeout(slideImage, 1000);
};