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

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

  1. If you are new to JS and HTML I would recommend trying to use a plugin. Something like Slick Slider would be perfect.

    A plugin will be much easier to setup and start using out of the box, it will also be a lot more responsive and functional.

    Slick Slider lets you set duration, add or remove navigation dots/arrows, allows looping for the images and lets you choose between swipe and drag. Its also got great documentation and easy to follow examples.

    You can learn more and get started here – https://kenwheeler.github.io/slick/

    Once you get a feel for things using a plugin, you can start trying to write your own custom carousel.

    Reply

Leave a Comment