Example: How to make a slideshow in a header.

The slideshow contains three elements:
 - Some HTML code.
 - Some JavaScript,
 - Some Styles,

Take a look at the below HTML and JavaScript code.
Switch the WYSIWYG editor to "Source Mode" and copy and paste the code into a new header.

You can see the result in the header of this page:
A slide show containing four images that changes every 5.000 millisecond = 5 seconds with a fade duration a 2.5 seconds.

<div class="slideshow-container">
   <div class="mySlides fade">
      <div class="numbertext">1 / 4</div>
      <img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerSouthVegetation.jpg" style="width:100%; max-height: 180px;" />
      <div class="text">For&aring;rudsigt fra terrassen</div>
   </div>
   <div class="mySlides fade">
      <div class="numbertext">2 / 4</div>
      <img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerMaroma.jpg" style="width:100%; max-height: 180px;" />
      <div class="text">Bjerget Maroma mod nord</div>
   </div>
   <div class="mySlides fade">
      <div class="numbertext">3 / 4</div>
      <img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerSouthOct.jpg" style="width:100%; max-height: 180px;" />
      <div class="text">Efter&aring;rssolen mod syd</div>
   </div>
   <div class="mySlides fade">
      <div class="numbertext">4 / 4</div>
      <img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerSunsetSouth01.jpg" style="width:100%; max-height: 180px;" />
      <div class="text">Solnedgang mod vest</div>
   </div>
</div>
<div style="text-align:center; padding-top:8px;">
   <span class="dot">&nbsp;</span> 
   <span class="dot">&nbsp;</span> 
   <span class="dot">&nbsp;</span> 
   <span class="dot">&nbsp;</span> 
</div>
<script>
   var slideIndex = 0;
   showSlides();
   function showSlides() {
     var i;
     var slides = document.getElementsByClassName("mySlides");
     var dots = document.getElementsByClassName("dot");
     for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
     }
     slideIndex++;
     if (slideIndex > slides.length) {slideIndex = 1}    
     for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
     }
     slides[slideIndex-1].style.display = "block";  
     dots[slideIndex-1].className += " active";
     setTimeout(showSlides, 5000);
   }
</script>

After copying the code to your new header you need some styling:
Open the Style Assistant and add the following Custom class:

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1920px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/4 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 2s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}

@-webkit-keyframes fade {
  from {opacity: .2} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .2} 
  to {opacity: 1}
}

Play with the HTML, JavaScript and CSS values in the code. You can vary the number of images by inserting HTML-elements in the "slideshow-container" <div> tag. The captions, the duration/fade and the colors and sizes can also be manipulated by the code.

As the above code is just a mix of HTML, JavaScript and CSS you can easily append it. If you for example want one of the images to be a clickable link with a ToolTip simply surround the  image tag <img src="https://casacalma.greenroad.dk/images/..."> with a href tag like:
<a href="https://google.com" title="Search on Google">
    <img src="https://casacalma.greenroad.dk/images/...jpg" style="width:100%; max-height: 180px;" />
</a>
and the image will now be an active link.

The same way you can make the image corners rounded simply by adding a style attribute:
<img src="https://casacalma.greenroad.dk/images/...jpg" style="width:100%; max-height: 180px; border-radius:16px;" />