How to animate slideshow HTML CSS JS

I have created a slideshow for my page using HTML, CSS and JS.

The code is as follows:

• index.html

<div class="slideshow">
                <div class="image__container">
                    <img src="/static/images/indoor2.jpg" alt="Indoor">        
                </div>
                <div class="image__container">
                    <img src="/static/images/indoor3.jpg" alt="Indoor">        
                </div>
                <div class="image__container">
                    <img src="/static/images/indoor4.jpg" alt="Indoor">        
                </div>
            </div>

• style.css

.slideshow {
    position: relative;
    animation: fadeInFromLeft 1.5s ease;
}

.image__container img {
    height: 80vh;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

• script.js

let slideIndex = 0;
showSlides();

function showSlides() {
    const slides = document.getElementsByClassName('image__container');

    // Hide all images
    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
    }

    // Show curr image
    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1;
    }
    slides[slideIndex - 1].style.display = 'block';

    // Repeat after 2 sec (2000ms)
    setTimeout(showSlides, 3000);
}

The slideshow works perfectly, but I wanted to add some transitions, for example fadeIn.

I tried this way:

• style.css

.slideshow {
    position: relative;
    animation: fadeInFromLeft 1.5s ease;
}

.image__container img {
    animation: fadeInSlideshow 1s ease-in-out;
    height: 80vh;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInSlideshow {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

However, even if it works, the transition between images is not exactly the best.

Not being very practical in the field of animations and transitions yet, I was wondering if someone could give me some advice on how to proceed, so as to understand how to approach this "problem" in the future.

I appreciate any response that can help me.

Thank you in advance.

let slideIndex = 0;
showSlides();

function showSlides() {
    const slides = document.getElementsByClassName('image__container');

    // Hide all images
    for (let i = 0; i < slides.length; i++) {
        slides[i].classList.remove('active');
    }

    // Show current image
    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1;
    }
    slides[slideIndex - 1].classList.add('active');

    // Repeat after 3 sec (3000ms)
    setTimeout(showSlides, 3000);
}

.slideshow {
    position: relative;
    animation: fadeInFromLeft 1.5s ease;
}

.image__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 10px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
    transition: opacity 1s ease-in-out;
}

/* Add a class to the visible image container */
.image__container.active {
    opacity: 1;
}

<div class="slideshow">
                <div class="image__container">
                    <img src="https://avatars.githubusercontent.com/u/12371363?v=4" alt="Indoor">        
                </div>
                <div class="image__container">
                    <img src="https://avatars.githubusercontent.com/u/1493671?v=4" alt="Indoor">        
                </div>
                <div class="image__container">
                    <img src=https://avatars.githubusercontent.com/u/11975561?v=4" alt="Indoor">        
                </div>
            </div>

I have Also, made the changes to display all images at same location. Hope that was you intention.

Please try this, if it works. Please use the correct Image URL in the HTML. I am using from internet resource.