Slideshow code- displaying the first slide and extending the fade duration?

I’m a beginner at coding these more complicated sections that combine HTML, CSS and JS.

I am trying to get the slideshow to display the first slide and extend its duration displaying these slides before they randomly stop. The arrows and the dots work successfully and are shown on the webpage but, the duration of the displaying of slides isn’t working and the first slide itself doesn’t appear.

WEBSITE PAGE DISPLAY HERE

I have tried extending the duration but I don’t know if it needs longer than that or not and I’ve tried altering the slideshow for statement in the JS code but decided against saving it as it altered the rest of the code.

Below is the picture link of my code which are listed // for different languages I’m using (may require zooming in):
CODE LINK HERE

The code doesn’t have any error messages apart from that the dots variable isn’t recognised in the JS code.

Thanks so much for your help.

//HTML
<script src="/JavaScript/slideshow.js"></script>
  
<div class="slideshow-container">
  
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="/Images/CINEMASCREEN.jpg" style="width:100%;">
    <div class="text">Caption One</div>
  </div>
  
  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="/Images/cinemaFood.jpg" style="width:100%;">
    <div class="text">Caption Two</div>
  </div>
  
  
  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="/Images/cinemakids.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>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>


//CSS
* {box-sizing:border-box}

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

/* Hide the images by default */
.mySlides {
  display: hidden;
  img {vertical-align: middle;}
}

.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;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* 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 {
  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;
}

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

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

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




//JS
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dots");
  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";
}

51 thoughts on “Slideshow code- displaying the first slide and extending the fade duration?”

  1. Pingback: clavivermecta 6 mg

Leave a Comment