A few things. Firstly, I would suggest using setInterval() instead. This allows you to easily stop the timer outside of the function. The syntax is identical to setTimeout(). setInterval() is very similar to setTimeout(), except it will continue to execute the function (the first parameter) until you call clearInterval().
Note that setInterval() (and setTimeout()) returns a value, which can be used for clearInterval() and clearTimeout(), respectively.
Changing your code to utilize setInterval should be fairly straightforward. Given what you have posted above, it might look something like this:
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
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";
}
var interval = setInterval(showSlides, 5000); // Change text every 5 seconds
Note that I save interval as a variable that can be used later to stop the timer.
Once you have made this change, the solution to your main question becomes much easier. You can set up event handlers by adding the following:
function pauseSlides(event)
{
clearInterval(interval); // Clear the interval we set earlier
}
function resumeSlides(event)
{
interval = setInterval(showSlides, 5000);
}
// Set up event listeners for the dots
var dots = document.getElementsByClassName("dot");
for (i = 0; i < dots.length; i++) {
dots[i].onmouseover = pauseSlides;
dots[i].onmouseout = resumeSlides;
}
The entirety of your code, given the above, may now look something like this:
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
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";
}
var interval = setInterval(showSlides, 5000); // Change text every 5 seconds
// Set up event listeners for the dots
var dots = document.getElementsByClassName("dot");
for (i = 0; i < dots.length; i++) {
dots[i].onmouseover = pauseSlides;
dots[i].onmouseout = resumeSlides;
}
function pauseSlides()
{
clearInterval(interval); // Clear the interval we set earlier
}
function resumeSlides()
{
interval = setInterval(showSlides, 5000);
}
</script>
Additionally, for reference:
setInterval() reference: https://www.w3schools.com/jsref/met_win_setinterval.asp
Events in JavaScript: https://www.w3schools.com/jsref/dom_obj_event.asp
