Jump to content
Laurie

Pause on hover for JS carousel

Recommended Posts

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>

<title>W3.CSS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<style>

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

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

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

 

</style>

<body>

 

<div class="w3-content" style="max-width:600px">

  <div class="mySlides w3-animate-right" >

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

 

  <div class="w3-content" style="max-width:600px">

  <div class="mySlides w3-animate-right">

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

 

  <div class="w3-content" style="max-width:600px">

  <div class="mySlides w3-animate-right">

   <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%">

    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>

    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>

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

</div>

 

<script>

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!!

 

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...