Jeza95

Amazing, thanks Ingolme! I removed the fade and it's now working as I need it to! Thanks again

Im currently using the slideshow/carousel code with automatic slide JS, but I'm having issues with the timing of the slides. The issue is when I set the timing to 4000ms, the intervals are showing one slide, then 4000ms of nothing, then the next slide. Would anyone be able to assist? Here's the code I'm using: <!-- Slideshow container --> <div class="slideshow-container"> <!-- Full-width images with number and caption text --> <div class="mySlides fade"> <a href="https://bhl.co.uk/heating-plumbing/air-conditioning-ventilation.html"> <img src="{{media url=&quot;wysiwyg/AC_banner_1.png&quot;}}" alt="" /> </a> </div> <div class="mySlides fade"> <a href="https://bhl.co.uk/outdoor-gardening/garden-chemicals/seeds-bulbs.html"> <img src="{{media url=&quot;wysiwyg/Bird_Seeds_1.png&quot;}}" alt="" /> </a> </div> <div class="mySlides fade"> <a href="https://bhl.co.uk/outdoor-gardening/garden-tools.html"> <img src="{{media url=&quot;wysiwyg/garden_tools_banner_1.png&quot;}}" alt="" /> </a> </div> <div class="mySlides fade"> <a href="https://bhl.co.uk/outdoor-gardening/garden-watering.html"> <img src="{{media url=&quot;wysiwyg/Garden_Watering_Banner_1.png&quot;}}" alt="" /> </a> </div> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> </div> <script> let slideIndex = 0; showSlides(); function showSlides() { let i; let 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, 3500); // Change image every 4 seconds } </script>