Have a text on top of a sliding image

[anuraa]

Hello friends: I am trying to have the following on top of the sliding images as done on www.gerstner.org . Thanks for your helps.

<div id="menu">
<span class="mtext" style="font-size:30px;cursor😛ointer" onclick="openNav()">
&#9776;Menu</span>
</div>

My coding of the sliding image is as follows.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  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/3 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 0.6s ease;
}

.active {
  background-color: #717171;
}

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

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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head>
<body>

<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="img_snow_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

<script>
let slideIndex = 0;
showSlides();

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let 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, 2000); // Change image every 2 seconds
}
</script>

</body>
</html>

 

[Deleted member 2829]

And what's the problem ? Have you inspected the page source of that Gerstner page and implemented it in the same way ?

 

[anuraa]

And what's the problem ? Have you inspected the page source of that Gerstner page and implemented it in the same way ?

Thanks for the input. Due to absence of images, you may not able to view. If you substitute any images to the three photos, you may see. What I am trying to achieve is to have the “Menu” and three parallel lines displayed on images. I tried but, didn’t work. The code source there is very complicated for me to understand. Thanks for your helps. Regards Snura

 

[Deleted member 2829]

Your slideshow works just fine. There's no sign of the menu and 3 lines, even when I comment out the call to showSlide(). This is hardly surprising as you have not got them in your html....

 

[anuraa]

Your slideshow works just fine. There's no sign of the menu and 3 lines, even when I comment out the call to showSlide(). This is hardly surprising as you have not got them in your html....

I know. I tried various thing to get the menu and 3 lines on top right corner of the images. Didn’t work. So, that part of coding to show the menu and 3 lines are not in “my” HTML code. That is the one, I am trying to include with your helps. Thanks regards Anura

 

[Deleted member 2829]

In this forum, we like to know what exactly you tried, and what exactly went wrong. Just saying "tried various things, nothing worked", then take it out and ask someone else to solve it isn't right. Would you not agree ?

 

[anuraa]

In this forum, we like to know what exactly you tried, and what exactly went wrong. Just saying "tried various things, nothing worked", then take it out and ask someone else to solve it isn't right. Would you not agree ?

Definitely, I agree. I will try few more attempts before showing my latest closer to my desire. Then, ask. Thanks regards Anura