So here is my code. I so far have the slide show worker with said given images.
The problem I am having is Containing + Stretching the images to fit inside of my container div. 🙂
Here is the code:
All help is welcome~! Thanks. ^^
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
.imgContainer {
padding-top: 80px;
background-color: rgba(0, 0, 0, 0.603);
width: 100%;
height: 575px;
}
.img1 {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
<div class="imgContainer" alt="imgContainer">
<img class="mySlides" src="/Users/stevenjeffers/Documents/GitHub/III/images/1.jpg" alt="imgj1">
<img class="mySlides" src="/Users/stevenjeffers/Documents/GitHub/III/images/2.jpg" alt="imgj1">
<img class="mySlides" src="/Users/stevenjeffers/Documents/GitHub/III/images/3.jpg" alt="imgj1">
</div>