Click here to Skip to main content
15,314,449 members
Articles / Web Development / ASP.NET
Technical Blog
Posted 28 Mar 2015

Stats

14.9K views
6 bookmarked

Change jQuery Slider Speed

28 Mar 2015CPOL2 min read
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.

Image Slider with Repeater

Image Slider with Repeater

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.

JavaScript
$.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.

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

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

JavaScript
$('#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. :)

Image 2 Image 3

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer (Senior)
India India
Proud Indian | Author | TEDx Speaker | Microsoft MVP | CodeProject MVP | Speaker | DZone Most Valuable Blogger| jsfiddler

My Website & Blog

taditdash.co.in

Programming Community Profiles

jsfiddle | Stack Overflow

Social Profiles

Facebook | Twitter | LinkedIn

Awards


  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016, 2017, 2018
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013

Comments and Discussions

 
-- There are no messages in this forum --