How do I interactively reduce (or stop) the sliding speed of a jQuery slider?

Question

I want to slow down and eventually stop my slide-show when the mouse pointer hovers over it.

Here is the script I have so far:

$(document).ready(function(){    
    $('#slideshow').cycle({    
        fx:     'fade',    
        speed:  'fast',    
        timeout: 1000,    
        pager:  '#slider_nav',    
        pagerAnchorBuilder: function(idx, slide) {    
            // return sel string for existing anchor    
            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
});

This is the website I am working on: http://www.getushopping.com/. If you visit the site, I am talking about the slide-show playing closest to the top of the page.

-1 for zero effort. Maybe I don't understand the question... you're asking _"how to reduce the speed"_ while the `speed:` parameter (set to `'fast'`) is right there in the code you provided, plain as day. Did you already try changing it to `'slow'`? As far as the second part of the question, did you at least read the documentation for the plugin? — Sparky, Feb 24 '12 at 05:49

Mikey G · Answer 1 · 2012-02-24T05:32:36.250

I'm guessing you're using the jQuery Cycle Plugin, so i'd check the "Beginner Demos" here:

http://jquery.malsup.com/cycle/begin.html

From the page above:

The speed option defines the number of milliseconds it will take to transition from one slide to the next.

To Pause when the mouse gets over it, read #4 on that page.

Looks like you need to include this option:

pause:  1

So your code will end up looking something like this:

$(document).ready(function(){

    $('#slideshow').cycle({

        fx:     'fade',

        speed:  '1000', // This is 1000 mili-seconds, or 1 second

        pause:  1,            

        timeout: 1000,

        pager:  '#slider_nav',

        pagerAnchorBuilder: function(idx, slide) {

            // return sel string for existing anchor

            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
});

score 3 · Answer 2 · answered Feb 24 '12 at 05:30

3

USe these settings to slow and pause slider on hover.

$(document).ready(function(){

    $('#slideshow').cycle({

        fx:     'fade', 
        speed:   300, 
        timeout: 3000, 
        pause:   1

    });

});

Hope this helps.

answered Feb 24 '12 at 05:30

talha2k

24,937
4
62
81

score 0 · Answer 3 · edited Feb 24 '12 at 05:36

0

Use:

speed: 1000,  //or some other value your prefer like 300, 400, etc
...

edited Feb 24 '12 at 05:36

animuson

53,861
28
137
147

answered Feb 24 '12 at 05:28

Sudhir Bastakoti

99,167
15
158
162

How do I interactively reduce (or stop) the sliding speed of a jQuery slider?

3 Answers3