Pause on hover for JS carousel

Laurie · May 9, 2017

Hello,

I can't figure out how to pause my animation when the cursor hovers over the slide. Here is my code:

<!DOCTYPE html>

<html>

<style>

.mySlides {display:none; height:130px}

.w3-left, .w3-right, .w3-badge {cursor:pointer}

.w3-badge {height:13px;width:13px;padding:0}

</style>

<body>

<p>I really enjoyed my experience at LIV. The staff are very professional and

friendly. I will be sure to refer some friends</p>

<p> -Shaun <p>

</div>

<p>I have been welcomed by everyone and shown many kindnesses, along with hints

of places to go, things to do and even assurances of safety on the streets as I

walked home after the evening sessions. I came, I learned and I grew in my

practice. I found peace. You have all carved a big space in my heart.</p>

<p> -Debbie <p>

</div>

<p>I thoroughly enjoyed my first class. Looking forward to trying out the other

classes soon. Thank you!</p>

<p> -Lorna <p>

</div>

<div class="w3-center w3-container w3-section w3-large w3-text-white"

style="width:100%">

<span class="w3-badge demo w3-border w3-transparent w3-hover-white"

onclick="currentDiv(1)"></span>

<span class="w3-badge demo w3-border w3-transparent w3-hover-white"

onclick="currentDiv(2)"></span>

<span class="w3-badge demo w3-border w3-transparent w3-hover-white"

onclick="currentDiv(3)"></span>

</div>

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {

showDivs(slideIndex += n);

}

function currentDiv(n) {

showDivs(slideIndex = n);

}

function showDivs(n) {

var i;

var x = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("demo");

if (n > x.length) {slideIndex = 1}

if (n < 1) {slideIndex = x.length}

for (i = 0; i < x.length; i++) {

x.style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots.className = dots.className.replace(" w3-white", "");

}

x[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " w3-white";

}

var myIndex = 0;

carousel();

function carousel() {

var i;

var x = document.getElementsByClassName("mySlides");

for (i = 0; i < x.length; i++) {

x.style.display = "none";

}

myIndex++;

if (myIndex > x.length) {myIndex = 1}

x[myIndex-1].style.display = "block";

setTimeout(carousel, 3000);

}

</script>

</body>

</html>

What am I missing?

Thanks!!

dsonesuk · May 9, 2017

This is similar to http://w3schools.invisionzone.com/index.php?/topic/56016-w3css-image-carousel-combined-auto-manual/#comment-308414

Sign In

Pause on hover for JS carousel

Recommended Posts

Laurie

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity