how to create slideshow header in html and css

 var slideIndex = 0;
carousel();

function carousel() {
  
 var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {

      x[i].style.display 
 = "none"; 
  }
  slideIndex++;
  
 if (slideIndex > x.length) {slideIndex = 1} 
  
 x[slideIndex-1].style.display = "block"; 
  setTimeout(carousel, 
 2000); // Change image every 2 seconds
}

  var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex 
 += n);
}

function showDivs(n) {
  
 var i;
  var x = document.getElementsByClassName("mySlides");
  if 
 (n > x.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = 
 x.length} ;
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none"; 

    }
  
 x[slideIndex-1].style.display = "block"; 
}

  <img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_lights.jpg">

 <img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">