画像がじわじわと切り替わるスライダーを作りたい

「前の画像の残像が残るようにじわじわと次の画像に切り替わ」らない原因は下記です。

imgのheightを 0 と auto で切り替えてますが、これはアニメーションが効きません。表示時は 0→auto で瞬時に切り替わります。opacity は0→1はアニメーションで表示されますのでフェイドインします。非表示時は、auto→0と瞬時に切り替わりますでの、アニメーションする間がないです。

対策として、下記のような手法をとります。

imgのheightはautoにしておいて、親のli要素を position: absolute;で固定配置して、各li要素を重ねます。

position: absolute;にすると他要素からは高さ0と扱われますので、親のul要素に高さを設定します。画像のアスペクト比に合わせるのなら、CSSのaspect-ratioを使うといいでしょう。

オーバーレイテキストもアニメーションで表示/非表示させる必要がありますので、
transitionはimg要素ではなく共通の親のa要素に設定します。

JSのviewSlideの対象も'.slide img'ではなく'.slide li a'にします。

コード例

CSSの .slide 以降のコードを下記のように修正します。

css

1.slide {2 overflow: hidden;3 width: 100%;4}5.slide ul {6 list-style-type: none;7 margin: 0;8 padding: 0;9 aspect-ratio: 2 / 1; /* 画像のアスペクト比に合わせる */10}11.slide li {12 position: absolute;13 margin-right: 0;14}15.slide li a {16 opacity: 0;17 transform: scale(1);18 transition: opacity 1s ease-in-out; 19}20.slide li a.active {21 opacity: 1;22}23.slide li img {24 display: block;25 width: 100%;26 object-fit: cover; 27 transform: scale(1);28 transition: transform 6s ease-out;29}30.slide li a.active img {31 transform: scale(1.05);32}

js

1 window.addEventListener('load', function () {2 viewSlide('.slide li a');3 console.log("viewSlide function called");4 initSlide();5 });

CodePenサンプル