Change jQuery Slider Speed

Introduction

We have already talked about integrating a jQuery Slider Plugin to ASP.NET Repeater control. Now in this blog, we will change the default speed of the slider.

Background

The blog I was talking about is – ASP.NET Repeater with jQuery Slider. I explained some simple steps to integrate the jQuery Elastiside Plugin with the Repeater. This blog was a success and I received many comments as well as questions. In this blog, I will explain one of the questions, which I was asked. I am quoting that below.

Hi taditdash,

I have problem with speed. 500 is set by default. I want to increase but no effect. I changed the value in jquery.elastislide.js (speed : 50) and also tried to change in function _validate : function() { this.options.speed = 500; value but no effect. Can you help me to fix this? Please help.

Thanks

Really very thought-provoking question.

Started my Research

I straight away opened the jQuery Plugin file and tried to see if there are any options to do this. I just searched the word “speed” and found a very interesting code block, which is given below.

$.Elastislide.defaults = {
    // orientation 'horizontal' || 'vertical'
    orientation : 'horizontal',
    // sliding speed
    speed : 500,
    // sliding easing
    easing : 'ease-in-out',
    // the minimum number of items to show. 
    // when we resize the window, this will make sure minItems are always shown 
    // (unless of course minItems is higher than the total number of elements)
    minItems : 3,
    // index of the current item (left most item of the carousel)
    start : 0,
    // click item callback
    onClick : function( el, position, evt ) { return false; },
    onReady : function() { return false; },
    onBeforeSlide : function() { return false; },
    onAfterSlide : function() { return false; }
};

Can you guess what this code block does actually? As the name $.Elastislide.defaults suggests, when we initiate the elastislide by $('#carousel').elastislide();, it sets these properties by default. So, speed is 500 ms by default.

Solution

To change the speed, we need to tell the plugin that we want a different speed and not the default one. For that, we need to pass the speed parameter to the elastislide() while initiating the elastiside. Let me code that to clarify what I mean to say.

$('#carousel').elastislide({ speed: 50 });

Now, the slider will slide speedily. If you change it to 5000, it will slide slowly.

$('#carousel').elastislide({ speed: 5000 });

Conclusion

If you have not started on jQuery Slider, then refer to the blog I have already written. Any problems or suggestions, please comment below.

Thanks for reading. Have a nice day. :)