Problem adding a pause/play to responsive slider / carousel. JS CSS HTML No bootstrap or Jquery

Question

I'm learning to code and have hit a problem on my second slider.

I've aded manual controls to the the second slider with success but I'm really having trouble adding a play/pause button using only JS CSS and HTML. I've managed to add a play pause and some javascript and CSS but it will not wok using pauseSlideshow() and playSlideshow().

I've watched many tutorials over the past week and I can't figure out what my code isn't working.

Any help would be appreciated.

Here is some of my code:

NB I have excluded the code for the first slider in the webpage as I'm focusing on the second one for the play pause.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <link
      href="https://fonts.googleapis.com/css?family=Lato|Montserrat:700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="main.css" />
    <script src="app.js" defer></script>
    <title>GT</title>
  </head>
  <body>
    <!-- Main Title Web page start  -->
    <header>
      <h1 class="banner">G-T</h1>
      <input type="checkbox" id="nav-toggle" class="nav-toggle" />
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Image Carousel</a></li>
          <li><a href="#">Links</a></li>

        </ul>
      </nav>
      <label for="nav-toggle" class="nav-toggle-label">
        <span></span>
      </label>
    </header>


      Thanks for taking the time to stop by. Watch my journey as I learn to code
      code.

    <!-- Image Carousel with the play pause issue -->
    <div class="slideshow-container">
      <div class="mySlides">
        <div class="numbertext">1 / 3</div>
        <img src="images/photo-of-a-fish-on-corals-1522160.jpg" alt="Splash" style="width: 100%;" />


      </div>

      <div class="mySlides">
        <div class="numbertext">2 / 3</div>
        <img src="images/photo-of-a-turtle-underwater-847393 (1).jpg" alt="diving" style="width: 100%;"/>


      </div>

      <div class="mySlides">
        <div class="numbertext">3 / 3</div>
        <img src="images/fish-in-water_opt.jpg" alt="Yellow and blue tang fish" style="width: 100%;" />


      </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
      <a type="button" id="pause">&#x23F8;</a>



    </div>
    <br />

    <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>
</html>


<script>

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");

showSlides();

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

function plusSlides(n) {
  var newslideIndex = slideIndex + n;
  if (newslideIndex < 4 && newslideIndex > 0) {
    currentSlide(newslideIndex);
  }
}
// Pause

var playing = true;

var pauseButton = document.getElementById("pause");

function pauseSlideshow() {
  var pauseButton = document.getElementById("pause");
  pauseButton.innerHTML = "&#9656;";
  playing = false;
  clearInterval(interval);
}

function playSlideshow() {
  pauseButton.innerHTML = "&#x23F8;";
  playing = true;
  interval = setInterval(showSlides, 5000);
}

pauseButton.onclick = function () {
  if (playing) {
    pauseSlideshow();
  } else {
    playSlideshow();
  }
};

</script>

Answer 1

I think you're pretty close. Typically a good place to start when something is not working in javascript is using the Inspect Element option within your browser and taking a look if there are any errors within the console. The first thing I noticed when doing this is that there was an error in the console when clicking the play button:

ReferenceError: Can't find variable: interval

Referenced within the pauseSlideshow() method. It doesn't appear that interval is declared outside of the playSlideshow() method so it's inaccessible within the pauseSlideshow() method. Including the var interval declaration resolves this issue.

When the page first loads you're calling the showSlides() method, but this is never setting the interval (which you are desiring to clear when calling the pauseSlideshow() method), so I would recommend adding a call playSlideshow() as well (to start the interval) -- as a result of the we're using the pauseButton within playSlideshow() so we'll want to define that first as well.

The other issue I located is that you're recalling setTimeout(showSlides, 5000) at the end of your showSlides() method. This causes multiple calls to showSlides when it's invoked from the play button -- causing additional confusion when trying to pause it. Now that we're calling playSlideshow() to start the interval after showSlides() when the page first displays, we don't need this additional setTimeout(showSlides, 5000) at the end of the showSlides() method. It would be ideal to not have to explicitly call showSlides() first, but unfortunately setInterval isn't the cleanest and delays when first starting without an explicit function call first.

I've included the modified code below:

 var slideIndex = 0; var slides = document.getElementsByClassName("mySlides"); var interval; var pauseButton = document.getElementById("pause"); showSlides(); playSlideshow(); function showSlides() { var i; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex - 1].style.display = "block"; } // Manual control function currentSlide(no) { var i; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex = no; slides[no - 1].style.display = "block"; } function plusSlides(n) { var newslideIndex = slideIndex + n; if (newslideIndex < 4 && newslideIndex > 0) { currentSlide(newslideIndex); } } // Pause var playing = true; function pauseSlideshow() { var pauseButton = document.getElementById("pause"); pauseButton.innerHTML = "&#9656;"; playing = false; clearInterval(interval); } function playSlideshow() { pauseButton.innerHTML = "&#x23F8;"; playing = true; interval = setInterval(showSlides, 5000); } pauseButton.onclick = function () { if (playing) { pauseSlideshow(); } else { playSlideshow(); } };

 <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat:700&display=swap" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link rel="stylesheet" href="main.css" /> <script src="app.js" defer></script> <title>GT</title> </head> <body> <.-- Main Title Web page start --> <header> <h1 class="banner">GT</h1> <input type="checkbox" id="nav-toggle" class="nav-toggle" /> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Image Carousel</a></li> <li><a href="#">Links</a></li> </ul> </nav> <label for="nav-toggle" class="nav-toggle-label"> <span></span> </label> </header> Thanks for taking the time to stop by. Watch my journey as I learn to code code. <:-- Image Carousel with the play pause issue --> <div class="slideshow-container"> <div class="mySlides"> <div class="numbertext">1 / 3</div> <img src="images/photo-of-a-fish-on-corals-1522160;jpg" alt="Splash" style="width. 100%:" /> </div> <div class="mySlides"> <div class="numbertext">2 / 3</div> <img src="images/photo-of-a-turtle-underwater-847393 (1);jpg" alt="diving" style="width. 100%:"/> </div> <div class="mySlides"> <div class="numbertext">3 / 3</div> <img src="images/fish-in-water_opt;jpg" alt="Yellow and blue tang fish" style="width; 100%;" /> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095:</a> <a type="button" id="pause">&#x23F8;</a> </div> <br /> <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> </html>

Problem adding a pause/play to responsive slider / carousel. JS CSS HTML No bootstrap or Jquery

Question

1 answers

solution1
0 ACCPTED 2020-04-22 17:53:52

Problem adding a pause/play to responsive slider / carousel. JS CSS HTML No bootstrap or Jquery

Question

1 answers

solution1 0 ACCPTED 2020-04-22 17:53:52

solution1
0 ACCPTED 2020-04-22 17:53:52