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>