I am struggling to achieve opacity with a transition on an image after clicking and changing the photo. I have created a basic slider that displays pictures from an array. How can I smoothly transition the opacity of the image from 0 to 1 over a duration of 1 second? I have tried adding styles both in JavaScript and CSS, but so far, it has not been successful. I have spent several hours working on this issue.
<button id="prev" class="btn-navi"></button>
<div id="my-image-slider"></div>
<button id="next" class="btn-navi"></button>
#cert #my-image-slider{
height: 200px;
width: 150px;
background-color: aqua;
/*opacity: 0;*/
/*transition: all 3s ease;*/
}
#cert #my-image-slider img{
height: 100%;
width: 100%;
opacity: 0.1;
transition: all 2s ease;
}
var images = [];
images.push("<img src ='img/dyplom1.jpg'>");
images.push("<img src ='img/dyplom2.jpg'>");
images.push("<img src ='img/dyplom3.jpg'>");
var curIndex = 0 ;
var mainDiv = document.getElementById("my-image-slider");
var nextBtn = document.getElementById("next");
var prevBtn = document.getElementById("prev");
mainDiv.innerHTML = images[0];
function getElement() {
mainDiv.innerHTML = images[curIndex];
/*images.style.opacity = 1;*/
};
function goNext() {
var nextIndex = curIndex + 1;
if (nextIndex === images.length) {
return 0;
} else {
return nextIndex;
}
};
nextBtn.addEventListener("click", function () {
curIndex = goNext();
getElement();
});
function goPrev() {
var prevIndex = curIndex - 1;
if (prevIndex === -1) {
return images.length-1;
} else {
return prevIndex;
}
};
prevBtn.addEventListener("click", function () {
curIndex = goPrev();
images.style.opacity = 1;
getElement();
});