How to add transistion to the image slider?

I'm trying to create an absolute simple image-slider in Vanilla JS. Got it to work, but have no idea how I could add a transition when the images changing.

Anyone can give me some advice what possibilities I have ?

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
    <section id="mainSection">
        <div id="mainDiv">
            <div id="previous" onclick="changeImageBackward()"><i id="arrow" class="fa fa-arrow-left fa-5x" aria-hidden="true"></i></div>
            <div id="mainImage">
                <img class="image"  src="#" alt="">
            </div>
            <div id="next" onclick="changeImageForward()"><i id="arrow" class="fa fa-arrow-right fa-5x" aria-hidden="true"></i></div>
        </div>
    </section>
<script src="script.js"></script>
</body>
</html>

CSS:

#mainDiv {
    background-color: rgb(81, 81, 81);
    height: 40vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly
}

#previous {
    background-color: grey;
    height: 80%;
    width: 20%;
    border: solid 1px black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mainImage {
    background-color: rgb(108, 108, 108);
    height: 80%;
    width: 50%;
    border: solid 1px black;
    border-radius: 10px;
    overflow: hidden;
}

#next {
    background-color: grey;
    height: 80%;
    width: 20%;
    border: solid 1px black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#next:hover, #previous:hover {
    box-shadow: inset  0 0 40px white;
}

JS:

let image = document.querySelector(".image");
const imageSource = ["bee-8978619_1280.jpg", "forest-8371211_1280.jpg", "mushroom-8313142_1280.jpg", "toadstool-8362901_1920.jpg"];
image.src = imageSource[0];
const next = document.querySelector("#next");
let i=0;


function changeImageForward () {
 if (i < 3){  
    i++  
    image.src = imageSource[i] 
    
    } else {
        i = 0
        image.src = imageSource[i];
    }
};

function changeImageBackward (){
if (i > 0) {
    i--
    image.src = imageSource[i]
} else {
    i = 3
    image.src = imageSource[i]
}
};

I don't really know where I could start

Solution

In your ccs you could set up a fade effect for the image and then in js, instead of just swapping the image immediately, add a small delay to allow the transition effect:

function changeImageForward() {
    image.classList.add('fade-out');
    setTimeout(() => {
        if (i < imageSource.length - 1) {
            i++;
        } else {
            i = 0;
        }
        image.src = imageSource[i];
        image.classList.remove('fade-out');
    }, 500); // This matches your CSS transition time
}

function changeImageBackward() {
    image.classList.add('fade-out');
    setTimeout(() => {
        if (i > 0) {
            i--;
        } else {
            i = imageSource.length - 1;
        }
        image.src = imageSource[i];
        image.classList.remove('fade-out');
    }, 500);
}

.image {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

.fade-out {
    opacity: 0;
}