Pause header slider on hover

Would it be possible to pause the slideshow on hover?

Hello there,

What type of main slides do you use? Do you have a link to your site to share here? By knowing it, we could help you better.

Regards,
Kharis

Hi, Kharis,

I am using the sydney pro default slider.

Hello there,

Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      $('#slideshow').on('mouseenter', function() {
        $(this).superslides('stop');
      });
      $('#slideshow').on('mouseleave', function() {
        $(this).superslides('start');
      });

    })(jQuery);
  1. Update

Regards,
Kharis

Kharis,

Your code stops the slideshow on hover, so it’s great. But, as soon as you move the cursor off the slide it instantly changes to the next. It changes on every in-out movement. Is there anyway to add a few seconds before the next slide starts on mouseleave?

Thanks.

Hello there,

Try this code:

(function($){

  $('#slideshow').on('mouseenter', function() {
    $(this).superslides('stop');
  });
  $('#slideshow').on('mouseleave', function() {
    // Delay 800 milliseconds before slide starts
    $(this).delay(800).superslides('start');
  });

})(jQuery);

Regards,
Kharis

Kharis,

I tried it, but not working. As soon as I move the cursor it instantly changes to the next slide. I increased the time to 20000 and still not working.