<div class="w3-content w3-display-container" style="max-width:800px">
  <img class="mySlides w3-animate-fading" src="https://via.placeholder.com/800x400" style="width:100%">
  <img class="mySlides w3-animate-fading" src="https://via.placeholder.com/800x400/333" style="width:100%">
  <img class="mySlides w3-animate-fading" src="https://via.placeholder.com/800x400/666" style="width:100%">

  <button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
  <button class="w3-button w3-display-right" onclick="plusDivs(1)">❯</button>
</div>

<script>
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); 
}
</script>