<div>
<div class="slideshow-wrapper">
<img class="slideshow-slides" src="#" alt="images one" style="width: 100%" />
<img class="slideshow-slides" src="#" alt="images two" style="width: 100%" />
<img class="slideshow-slides" src="#" alt="images three" style="width: 100%" />
</div>
</div>
Html:
.slideshow-wrapper {
display: inline-block;
position: relative;
width: calc(100% - 10px)
background: #191b1a;
}
.slideshow-slides{
border: 5px solid #FE9C00;
}
.slideshow-slides>.slideshow-slides {
position: absolute;
transition: all 500ms ease-in-out;
}
Css:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slideshow-slides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1;
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
Java:
