Jump to content
ASDASASDSDAD

AutoMatic SlideShow + Manual Slideshow = Broken

Recommended Posts

https://www.w3schools.com/howto/howto_js_slideshow.asp used this link and I wanted a slideshow that repeats every 5 seconds. Got that working, bu the three dots and the arrows to change pictures didn't work so I tried combining them. This worked, kind of, but for some reason whenever i clicked to change manually it messed up the automatic timer and just changed randomly and quickly. Not practical at all. Here is my code.

 

<!DOCTYPE html>
        <html>
<link rel="stylesheet" href="HomeStyle.css">
<head>
    <Title> RPR Architecture Home Page</Title>
        <style>
                a#Links{padding: 1px; margin: 0px; font-size:25px;border: 2px solid steelblue}
                a#Links2{color:white; font-family: Arial;  width: 300px; padding: 1px; margin: 0px; font-size:25px; text-decoration: none;}
        </style>
</head>
    <body>
        <h1>RPR <i>Architecture</i> & Design</h1>
    

        <br> <center><div id="Links"><a href="Photo%20Gallery.html" id="Links2"> &nbsp Photo Gallery &nbsp</a> <a href="Contact.html" id="Links2" style="margin: 0px 1px 0px -3px;"> &nbsp Contact &nbsp</a><a id="Links2" href="About%20RPR.html">&nbsp About RPR  &nbsp </a></div></center>
<br><br><br> <div class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext"></div>
    <img src="Pictures/Photo%20Gallery%20Image%206.jpg" border="3" style="width:100%">
    <div class="text"></div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext"></div>
    <img src="Pictures/Photo%20Gallery%20Image%204.jpg" border="3" style="width:100%">
    <div class="text"></div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext"></div>
    <img src="Pictures/Home%20Page%20Picture.jpg" border="3"  style="width:100%">
    <div class="text"></div>
  </div>

  <!-- Next and previous buttons -->
  <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>
    </body>
            
    <script>
       
               
                
                var 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) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides.style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
      dots.className = dots.className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4700);
}
        

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides.style.display = "none"; 
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1} 
  slides[slideIndex-1].style.display = "block"; 
  setTimeout(showSlides, 5000); // Change image every 2 seconds

Share this post


Link to post
Share on other sites

So each time you call showSlides, you're setting a new recurring call of showSlides, due to setTimeout.

The timeouts don't interfere with each other, as you can see in this tryit. https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_settimeout2

Rather than going setTimeout each time you click a button, you'll need to first clear the current timeOut using clearTimeout.

Are you able to give it a go from here?

Share this post


Link to post
Share on other sites

You need to clear the timeout everytime you hover any of the nav or dots. Then you will navigate using either without timer interference, then on mouseout you will restart the timer. You never use mutiple functions with duplicate names as only one will be run on calling.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...