CODEWITHSUNDEEP
javascripthtml
yungeddy
yungeddy

Reputation: 43

How can I add a mouse over event to this function?

I am working on a slideshow / carousel in HTML with vanilla JS controlling the changing of the slides. I am happy with the current functionality, but I would like the slideshow to pause if the user hovers over the gallery. I understand that I could do this by clearing the timeout function, but I am stuck on how to integrate that into the current function. I am trying to add this functionality to the 'showSlides' function.

HTML

<div class="galleryImages">
            <div class="numbertext">1 / 2</div>
            <img src="./assets/images/1.jpg" style="width: 100%;" />
          </div>

          <div class="galleryImages">
            <div class="numbertext">2 / 2</div>
            <img src="./assets/images/2.jpg" style="width: 100%;" />
          </div>

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

JS

var slideIndex = 0;
showSlides();

// Next/previous controls
function plusSlides(n) {
  changeSlides((slideIndex += n));
}
// automatically show slides and change the slide at the set timeout
function showSlides() {
  var i;
  var slides = document.getElementsByClassName("galleryImages");
  let gallery = document.getElementById("gallery");
  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
}
// change the slides based on the user input on the prev and next buttons
function changeSlides(n) {
  var i;
  var slides = document.getElementsByClassName("galleryImages");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = "block";
}

Upvotes: 1

Views: 204

Answers (2)

cyborg86pl
cyborg86pl

Reputation: 2617

In showSlides() set

gallery.addEventListener('mouseover', function() {
    // stop timeout here
});

gallery.addEventListener('mouseout', function() {
    // restart automatic slides change
});

EDIT: as showSlides() is executed many times you'll need to remove event listeners, or refactor your code, so that those listeners are set once at the beginning only.

Upvotes: 0

Sebastian B.
Sebastian B.

Reputation: 2201

Add a variable which will hold a reference to the timeout to the top:

var currentTimeout = null;

Store the new timeout into this variable when creating:

currentTimeout = setTimeout(showSlides, 5000); // Change image every 5 seconds

Hover event handler:

if (currentTimeout) {
   clearTimeout(currentTimeout);
   currentTimeout = null;
}

Hoverout event handler:

if (currentTimeout) {
  // Should never happen, but to be safe...
  clearTimeout(currentTimeout);
}
currentTimeout = setTimeout(showSlides, 5000); // Change image every 5 seconds

Upvotes: 1

Related Questions