スライドショーをJavaScriptにて実装したい

題名にもある通り、スライドショーをJavaScriptにて背景画像を切り替える形で実装したいのですが、
・１０秒ごとに背景画像が切り替わる
・切り替わる際、1秒間かけてフェードイン（アウト）する
・jqweryやその他ライブラリを用いない
という条件を考えた際に、どのように記述していけばいいのでしょうか？
現在自分は配列（images）に画像となる要素を記述し、html内に記述しているclassのbackground-image__mainに対して画像のURLをJavaScriptにて表示させている状況ですが、この表示を配列内の要素を切り替えて画像を差し替えたいと思っております。
また、フェードインのアニメーションはcssにて記述するのが一般的ですか？

html
1    <div class="background-image">
2      <img src="" alt="" class="background-image__main background-image__main--current" id="mainImage">
3      <img src="画像/logo-white.png" alt="ロゴ" class="background-image__white-logo">
4    </div>

css
1.background-image{
2  height: 100vh;
3  width: 100vw;
4  background-size: cover;
5  background-position: center;
6}
7.background-image__main{
8  height: 100vh;
9  width: 100vw;
10}

JavaScript
1// スライドショー関連
2  const images =[
3    'img/image01.png',
4    'img/image02.png',
5    'img/image03.png',
6    'img/image04.png',
7    'img/image05.png',
8    'img/image06.png',
9  ];
10  const currentIndex =0;
11  const mainImage =document.getElementById('mainImage');
12  
13  mainImage.src =images[currentIndex];
14