Javascript Slider - эффект исчезает при смене изображения

Question

Я выполнял небольшую функцию каждые 5se c. Переключатель «ползунок» на следующем изображении (требуется / используется только два изображения), поэтому я сделал

const home_imageslider = document.getElementById('home_imageslider');
setInterval(function () {
    home_imageslider.innerHTML = '<img src="Images/nachfolger.jpg" class="card-img" alt="..." style=" height:18rem; object-fit: cover;">';
}, 5000)
setInterval(function () {
    home_imageslider.innerHTML = '<img src="Images/senior.jpg" class="card-img" alt="..." style=" height:18rem; object-fit: cover;">';
}, 10001)

и мой. html выглядит так

<div class="col-md-4" id="home_imageslider">
   <img src="Images/senior.jpg" class="card-img" alt="..." style=" height:18rem; object-fit: cover;">
</div>

Теперь он меняется каждые 5se c, но я хочу плавного перехода между изображениями. Я пытался добавить transition: 0.5s; в функцию setInterval, но это не сработало. Я также попытался добавить css:

#home_imageslider {
    animation: home_imageslider 0.75s backwards;
}
@keyframes home_imageslider {
    from {opacity: 0 }
    to {opacity: 1}
}

, но это также не сработало. Есть идеи?