Swiper: Stop autoplay while hovering

[stereodenis]

There is no option for that

[nolimits4web]

Right, and will not be. You can call .stopAutoPlay() and .startAutoPlay() within jQuery's .hover handlers http://api.jquery.com/hover/

[ptz-nerf]

Seems .stopAutoplay() and .startAutoplay don't work on the latest version. Tested on default demo by adding $('.swiper-container').hover(mySwiper.stopAutoplay(),mySwiper.startAutoplay()).

[mairead]

stopAutoplay not working for me either.

[nolimits4web]

@mairead give me a link to your project so i can take a look

[mehernosh]

Hey @nolimits4web
Awesome work! Saved me a load of time, Thanks!

@ptz-nerf, @mairead
use https://github.com/mehernosh/Swiper/blob/master/dev/idangerous.swiper.js if you are in a hurry.

[ghost]

$(".swiper-container").hover(function(){
swiper.stopAutoplay();
}, function(){
swiper.startAutoplay();
});

[monty-georgiev]

What if you have more than one instance? How would you reuse the stop and play functions?
Can you get the instance and do something like:

$(".swiper-container").hover(function(){
[getTheInstance].stopAutoplay();
}, function(){
[getTheInstance].startAutoplay();
});

[ptz-nerf]

var mySwiper = $('.swiper-container')[0].swiper;`

But during initialization your already have instance:

var mySwiper = new Swiper('#target');
$("#target").hover(function(){
     mySwiper.stopAutoplay();
}, function(){
     mySwiper.startAutoplay();
});

[monty-georgiev]

Your approach suggests that if I have 3 instances (e.g. swiper1, swiper2, swiper3) and I want to stop the autoplay on hover, then I should go and do this block for each one of them like so:

$('#target1).hover(function(){swiper1.stopAutoplay}, function(){swiper1.startAutoplay});
$('#target2).hover(function(){swiper2.stopAutoplay}, function(){swiper2.startAutoplay});
$('#target3).hover(function(){swiper3.stopAutoplay}, function(){swiper3.startAutoplay});

However that's not really DRY is it?

Instead, the following solution, that I found, works way better:

$(".swiper-container").hover(function(){
     this.swiper.stopAutoplay();
}, function(){
     this.swiper.startAutoplay();
});

So this is how you get the instance without referencing to the variables

[ptz-nerf]

1) If you have 3 instances with same configuration, it is better to write some function which creates them.
2) I'm glad that you have found a solution. Note this.swiper and $('.swiper-container')[0].swiper are the same. My code is just copy-paste from API docs.

[qJake]

The code @monty-georgiev posted should be included as an option in swiper. I shouldn't have to hack the library with jQuery in order to get some desired functionality. :)

[davidwwu]

I'm getting start/stopAutoplay() is not a function error. Any idea?

[davidwwu]

NVM, just found the solution in the api documentation:

$(".swiper-container").hover(function() {
    swiper.autoplay.stop();
}, function() {
    swiper.autoplay.start();
});

[killmanda]

no jQuery solution

var mySwiper = new Swiper ('#target')
mySwiper.el.addEventListener("mouseenter", function( event ) {   
    mySwiper.autoplay.stop();
}, false);