'Hero banner wont display

I've been trying to add a hero banner into a page that has a javascript slideshow gallery for quite a while now and I cant seem to get both elements to stay on the same page without influencing each other in some sort of way. If I remove any javascript form the page then the hero banner will display, however when I attempt to add the hero banner in with the javascript slideshow gallery then it does not display.

Below are the HTML, CSS, and Javascript for the page

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  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";
}

#nav {
  overflow: hidden;
  background-color: rgb(180, 179, 179);
}

#nav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#nav a:hover {
  background-color: #ddd;
  color: black;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("TestPictures/V&Ahero.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom: 10px;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: larger;
}

#wrap {
  width: 95%;
  margin: 0 auto;
  ;
}

* {
  box-sizing: border-box
}

.gallery {
  width: 100%;
}

.slideshow-container {
  width: 70%;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

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

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

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

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

.content {
  width: 100%;
  height: 400px;
  background-color: #9da5a385;
  float: left;
  margin-bottom: 15px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
  height: 300px;
}

.box {
  background-color: #9da5a385;
  height: 300px;
}

.clear {
  clear: both;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slideshow test</title>
  <style type="text/css" media="all">
    @import "slideshowTest.css";
  </style>
</head>

<body>

  <nav id="nav">
    <a href="#" id="V&A">Home</a>
  </nav>

  <div class="hero-image">
    <div class="hero-text">
      <h1 style="font-size:50px">Welcome to the V&A</h1>
      <p>Scotlands museum of design</p>
    </div>
  </div>

  <div id="wrap">

    <div class="content">
    </div>

    <div class="gallery">

      <div class="slideshow-container">


        <div class="mySlides fade">
          <img src="TestPictures/Exhibition1.jpg" style="width:100%">
          <div class="text">Caption Text</div>
        </div>

        <div class="mySlides fade">
          <img src="TestPictures/Exhibition2.jpg" style="width:100%">
          <div class="text">Caption Two</div>
        </div>

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


        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
      </div>

    </div>


    <div class="clear"></div>

    <div class="wrapper">
      <div class="box">One</div>
      <div class="box">Two</div>
      <div class="box">Three</div>
    </div>


    <div class="clear"></div>

    <div class="footer">
    </div>

  </div>

  <script src="slideshowTest.js">
  </script>
</body>

</html>

Hopefully, I've described this problem in a way that makes sense, I've also checked the file paths to all the pictures used on the page and am certain that has nothing to do with the problem. I'm fairly new to using HTML, CSS, and javascript so any help would be appreciated.

Thanks.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Hero banner wont display

Sources

Related Questions