Stop slide in javascript

Question

I used this parallax slider http://codepen.io/suez/pen/ByvKXE in my project.

Then I added a hover menu on the top of the page.

<ul class="menu">
    <li class="list-menu fa-home"></li>
    <li class="list-menu fa-suitcase"></li>
    <li class="list-menu fa-flask"></li>
    <li class="list-menu fa-user"></li>
    <li class="list-menu fa-contact"></li>
</ul>

I would like to stop parallax slider when I put my mouse on the menu to click on the buttons.

How could I do that ?

Thanks for answer.

Answer 1

Have a look at http://codepen.io/anon/pen/YwGjNd. I have made following changes.

stopAutoSlide : variable to allow or block autoslide

mouseenter, mouseleave: events to change stopaAutoSlide state

if (!stopAutoSlide): to change current slide only if stopAutoSlide is false.

I hope this helps.

$(document).on("mouseenter", ".slider-pagi", function() {
  stopAutoSlide = true;
});

$(document).on("mouseleave", ".slider-pagi", function() {
  stopAutoSlide = false;
});