Hey there! I have a little project where I am trying to rotate images within a div every few seconds
The code I currently have is functional, but there are a couple of things that I want to tweak and I'm hoping you can assist me with that:
- The div adjusts its size based on the current image displayed, but I prefer it to always maintain the size of the larger image.
- I would like a smooth fade transition between the images rather than an abrupt switch.
Thank you for taking the time to read this, any help would be greatly appreciated.
This is what my current code looks like:
var imgIndex = 0;
setInterval(function() {
images[imgIndex].style.display = "none";
imgIndex++;
if (imgIndex >= images.length) {
imgIndex = 0;
}
images[imgIndex].style.display = "block";
}, 5000);.imageDisplay {
display: inline-block;
width: 100%;
background-Color: white;
color: black;
border-radius: 5%;
margin: 2px;
padding: 1px;
opacity: 0.5;
transition-duration: 0.5s;
}
.imageDisplay:hover {
opacity: 1;
}
.Image {
width: 99%;
height: auto;
margin: 1px;
padding: 1px;
border-radius: 5%;
cursor: pointer;
display: none;
}<div class="imageDisplay">
<p>Description</p>
<img class="Image"></img>
<img class="Image"></img>
</div>