I am facing an issue with incorporating a code for an image slideshow into my website. The current CSS is causing the slideshow to malfunction.
Without the slideshow code in the CSS, the image appears correctly on the screen and changes its source every 2 seconds as intended.
However, placing the code inside the CSS results in two different images being displayed inline on the screen. I have spent hours trying to troubleshoot the CSS but haven't been able to solve the problem. Any suggestions or assistance would be greatly appreciated.
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
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}#banner .content .image {
border-radius: 100%;
display: inline-block;
height: 18em;
margin-left: 3em;
vertical-align: middle;
width: 18em;
}
#banner .content .image img {
border-radius: 100%;
display: block;
width: 100%;
}<section id="banner">
<div class="content">
<header>
<h2>header text</h2>
<p>more text<br />
</p>
</header>
<span class="image"><img class="mySlides" src="images/pic01.jpg" alt=""
/></span>
<span class="image"><img class="mySlides" src="images/pic02.jpg" alt=""
/></span>
</div>