Fork me on GitHub
Sudo Slider

  • Howto setup Sudo Slider

    1. Put the content you wan't to slide inside a container:

    <div id="slider" >
       <div><img src="../images/01.jpg"/></div>
       <div>Some other content</div>
       <div><img src="../images/03.jpg" alt="image description"/></div>

    (1.1) You can put it inside a list inside the container, if you want it to look "nicer" when JavaScript is turned off:

    <div id="slider" >
          <li><img src="../images/01.jpg"/></li>
          <li>Some nice content</li>
          <li><img src="images/03.jpg" alt="image description"/></li>

    2. Include the JavaScript

    <script type="Text/Javascript" src=""></script>
    <script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>

    3. Run the slider

       var sudoSlider = $("#slider").sudoSlider({
          numeric: true

    If you can't get it to work, copy the basic example, and make sure that the links to the JavaScript works, because from this point i assume that you have SudoSlider up and running.

    You specify the options like the following

        var sudoSlider = $("#slider").sudoSlider({
            option1: setting1,
            option2: setting2,
            option3: setting3,
            option4: setting4

    Here's an example with a couple of options set:

        var sudoSlider = $("#slider").sudoSlider({
            continuous:        true,
            history:           true,
            numericText:       ['one','two','three'],
            customLink:        'a.tablink',
            updateBefore:      true,
            nextHtml:          '<span> next </span>'

    Remember to exclude the "," after the last setting.

    All the options of SudoSlider are case insensitive, so you can use any mix of upper and lowercase when writing the options.

    You can off course replace the "#slider" with any CSS selector.
    Here's a list of all options and an explanation of what they do.


    Methods is what you use, if you want the slider to do somethings after you've started it.

    You do that by doing something like this:


    This of course requires that you saved the slider in the variable called "sudoSlider".
    The variable can have any name, you just need to make sure that you actually save the slider in a variable.

    The keyboard demo is a good basic example of how methods are used.

    Any of these methods can be used. (see examples of them below.)

    .getOption(option); Returns the value of that option.
    .setOption(option, value); Sets the value of an option.
    .setOptions(object); Sets all the options in the object to the values in the object.
    .insertSlide(html, pos, [numtext]); Inserts a slide with the specified content into the slider. With the pos value you can set wich slide the content should be inserted after (and if pos == 0, the content is inserted before the other slides, and if you specify a negative number, it starts from the right instead). And with numtext (it's optional), you can set the associated numericText.
    .removeSlide(pos);Removes a slide.
    .goToSlide(a, [speed]); Animate to slide a (1 is the first, and 'next', 'prev', 'first' and 'last' also works). The optional speed argument specifies the speed.
    .getSlide(number); Gets the jQuery object for the specific slide (1 is the first). When using continuous, the slider might rearrange the slides, so $("#slider ul li:eq(2)") might not get the slide you expect. This function will.
    .block(); Blocks any user input.
    .unblock(); Removes the above mentioned block.
    .startAuto(); Starts an automatic slideshow.
    .stopAuto(); Stop the automatic slideshow.
    .adjust(); Adjusts the slider, if anything has been changed (like the image size). The slider height, width and internal "position" is adjusted.
    .destroy(); Destroys the slider, you can create it again by using .init();
    .init(); Use this to initiate the slider, after it has been destroyed.
    .runWhenNotAnimating(func) Takes a function, and runs it at the first available time when the slider is not performing an animation
    .getValue(name); This returns values, like the current slide. See accepted values and what they mean below.
    .stopAnimation(); Stops the current animation.

    Below are example usage the different methods.

        // Returns the value of the option "effect".
        var fade = sudoSlider.getOption("effect");
        // Set the option effect to fade
        sudoSlider.setOption("effect", "fade");
        // Sets the effect to fade and enables touch
        sudoSlider.setOptions({effect: "fade", touch: true});
        // The content is inserted after the second slide.
        sudoSlider.insertSlide('<p>This is some content</p>', 2, 'Content 3');
        // The second slide is removed.
        // The slider animates to slide number 3 in 500 miliseconds.
        sudoSlider.goToSlide(3, 500);
        // Returns the jQuery object for the 2nd slide
        var slide = sudoSlider.getSlide(2);
        // User input is blocked (the controls)
        // User input is unblocked.
        // Starts a slideshow.
        // Stops an automatic slideshow.
        // Adjusts the slider, if anything has been changed (like the image size).
        // The slider is destroyed.
        // Build it again.
        // Returns the current slide number (starts from 1).
        var currentSlide = sudoSlider.getValue('currentSlide');
        // Returns the total number of slides.
        var totalSlides = sudoSlider.getValue('totalSlides');
        // Returns if the slider is currently clickable (true/false).
        var clickable = sudoSlider.getValue('clickable');
        // Returns if the slider is currently destroyed (true/false).
        var destroyed = sudoSlider.getValue('destroyed');
        // Returns if the slider is currently running an automatic slideshow (true / false).
        var destroyed = sudoSlider.getValue('autoAnimation');
        // Alerts "Done" when the slider is not animating. Runs immidiatly if the slider is idle.
        sudoSlider.runWhenNotAnimating(function () {alert("Done");});
        // Stop the current animation (if one is running).

    If you have a question, bug report or spelling correction (English isn't my first language, so please correct me). Then please leave a comment or file an issue

  • All options and what they do

    Note that all options are case insensitive, so you can use any mix of upper and lowercase when using the options.

    [option name]:[option default value]

    [description of the option]
    [Link(s) to example usage]

    Slider behavior
    Full example


    controlsFade: true

    If set to false, the next/previous/first/last buttons won't fade away, when reaching the end of the slider, and continous == false.

    controlsFadeSpeed: '400'

    The speed of the fade animation of the previous and next buttons, when reaching the end of the slider and
    continuous == false and controlsFade == true.
    You can also use the values 'fast', 'normal' or 'slow'. (Which means 200, 400 and 600 milliseconds.)


    The attributes used in the "span" tag, that encloses all the generated controls.
    See designers guide for an explanation of exactly where this is placed.


    If false, the previous and next buttons will not be shown.
    It's still possible to make a next and previous buttons with customLink.
    demo of prevNext:false

    prevHtml:'<a href="#" class="prevBtn"> previous </a>'

    The HTML used for the previous button.
    It can be anything, as long as it's valid HTML with minimum 1 tag enclosing the whole thing.
    See designers guide for an explanation of where this HTML is positioned relative to the slider.

    nextHtml:'<a href="#" class="nextBtn"> next </a>'

    The HTML used for the next button.
    It can be anything, as long as it's valid HTML with minimum 1 tag enclosing the whole thing.
    See designers guide for an explanation of where this HTML is positioned relative to the slider.


    If set to true, the numeric buttons will be shown.
    The text in these buttons can be specified with numericText.
    If set to 'pages', it will only make one button pr. [x] number of slides. (Where [x] is determined by the option "slideCount").


    The attributes used in the "ol" tag, that encloses all the generated numeric buttons.
    See designers guide for an explanation of exactly where this is placed.


    The text used in the numeric buttons. This text is also used to specify the hash-url for each slide, which the history function use.
    Example usage is numericText:['First button text', 'Button number 2','This text comes in button number 3']
    Any length of text's can be used, since the default values (1,2,3,4,5,6......) will be inserted if nothing is specified.
    If using history, all values used must be unique like ['text1','text2','test3']. (If nothing is specified, it will still just use 1,2,3,4... as default values.)
    demo ussage of numericText


    If set to a value (jQuery selector string), all the matched objects can make a animation.
    Example usage of this variable is: customLink: 'div#customLinkbox a'.
    To specify what animation the slider is supposed to do, set a value in the "data-target" attribute of the customLink element. This can be a number (1,2,3..) or "next", "prev", "last", "first".
    You can place the customLinks wherever you want, even inside ajax-loaded or JavaScript generated content. If the selector is matched, it will work.
    Example usage in demo
    If you prefix the customLink with ">", then it will only match elements within the slider.

    insertAfter: true

    If set to false, the auto generated controls will be inserted before the slider (before the <div id="#someID">...</div> ) instead of after.


    If you are showing more than 1 slide at the time, use this option to tell the slider how many slides you are showing.
    That way, the slider will adjust when to fade out controls, and also make some adjustments to continuous to make that work.
    AutoHeight and AutoWidth will also make sure that all the slides that are supposed to visible, are visible.
    demo usage of slideCount & continuous


    This option adjust how many slides the slider moves when doing an animation to the "next" or the "previous" slide.
    demo usage of moveCount

    Slider behavior


    Specifies the effect that will be used this can be a text string as shown here.
    You can see all the possible effects in this demo
    If you know enough JavaScript, you can also make your own animation. Read the source code here to get an idea: Make your own effect
    You can also specify effects and their duration pr. slide.
    You can adjust how the many slices are used in the "fold" or "slice" effect with the slices option.
    And you can set how many rows and columns are used with the boxRows and boxRows options.
    Note that you can also specify multiple effects to choose randomly between, and use wildcards to specify many effects, see how here.


    If set to true, SudoSlider will use CSS animations for everything in compatible browsers, and use JavaScript animations in non-compatible browsers.


    If set to true, the slider will do the following when requested to animate somewhere, when there is already an ongoing animation:
    - Stop the current animation, and move the slider to the slide it was going to.
    - Begin the next animation.
    Otherwise, the next animation will just be queued.


    If set to true, the slider will position the slides in a vertically instead horizontally.
    You can always manually position the slides just the way you want. This setting only affects some css properties of the slides container.
    For some effects, like "fold", this specifies the direction in which the effect runs
    demo of vertical:true


    If set to true, the slider will automatically adjust the slides to the size of the slider (in most cases #slider).
    This can be used for responsive layouts or a fullscreen slider.
    The slider readjusts when the window is resized, so if any manual resizing is done, just call "$(window).resize();" and the slider will readjust.
    demo of responsive:true


    If set to true, the slider will accept touch input, and move the slider accordingly.
    That means that you can "drag" the slides around.
    If vertical is true you move the slides vertically, otherwise you move them horizontally.
    demo of touch:true


    If touch is enabled, this option makes it so mouse input pr. default doesn't move the slider.
    If you want mouse input to move the slider, just like touch input does, set this option to true.
    demo of mouseTouch:true


    This specifies what you can drag if you are using touch, because maybe you only want the slides to drag around if the user grabs the background.
    You can set this to a CSS selector string or a jQuery object.
    This selector string doesn't only select things inside the slides, it can also hit stuff outside of the slider (see the TouchHandle outside slider demo).
    demo of touchHandle


    When a user drags the slider using touch input, there is a possibility that the user didn't drag the slider to move the slider, but to scroll up/down the page (because that is what touch drag usually does).
    When this option is true, the slider tries to see if the user dragged in a direction that seems like the slider should move, or if the user drags in a direction that looks like the user wants to scroll down the page.
    This doesn't work perfectly all the time, so if you have trouble with touch, try to disable this option.
    demo of mouseTouch:true

    speed: 1500

    This number value specifies the speed of the sliding animation in milliseconds.
    You can also use the values 'fast', 'normal' or 'slow'. (This means 400, 800 and 1200 milliseconds.)


    Set the easing the document should make the animation with. This affects all animations (also the height changing animations).
    There are 2 easings included in jQuery, and they are 'swing' and 'linear'
    Like any other jQuery plugin, you can also use non default easings, if you include a external JavaScript, like the jQuery Easing Plugin.

    Note that modern browsers as default uses css transitions, changing this option will not change the easing they use (unless you set useCSS to false).
    To change easing for browsers that use CSS transitions, set to option CSSease.


    Sets the easing that is used for CSS transitions. is a good place to find a good CSS easing


    If set to true, the slider will automatically slide to the next slide after a specified period of time (see pause).
    This does not work with history, and it's not supposed to.
    The automatic sliding stops when a user makes the slider do something.
    demo of auto:true

    pause: '2000'

    Sets the duration of the pause (from one animation stops, till the next begin) in milliseconds, when auto is true.


    Pr. default the slider stops completely when a user makes the slider do something.
    But by using this option, you can make the slider continue after X miliseconds of inactivity.
    demo of resumePause


    If set to true, the slider will be continuous. Meaning that when sliding to the left of the first slide, you get the last (and if you slide the right of the last, you get the first).
    You could also say that the slider goes in a loop, if you continuously slide in one direction.
    When using continuous the slider rearranges the slides before and after an animation
    demo of continuous:true

    updateBefore: false

    If set to true, the numeric buttons (and the customLinks) will be given the class current when an animation is started, instead of when it finishes.


    If set to true, the slider will track which slide you are at, by the URL. Meaning that bookmarks and the browsers back/forward buttons are supported.
    When using history, remember to include one of the required dependencies (see the demo), in order for it to work in old browsers.
    Note: If you are testing a page locally and not on a server, history might not work. That is simply because how browsers work, and not because the script doesn't work.
    You can set the text (hashes) used by history by setting the numericText option. See the demo for how it works.
    history:true in demo


    If set to true, it will automatically adjust the height of the slider, according to the height of the content within the current slide.
    demo of autoHeight:true


    If set to true, it will automatically adjust the height of the width, according to the width of the current slide.
    demo of autoHeight:true


    Can be set to 0, 1 and 2. (e.g: performanceMode:2).
    PerformanceMode helps performance on a page, by hiding the slides that should be invisible anyway (if set to 1 or 2). All the slides will be shown again when an animation is running.
    If performanceMode is set to 2, it will also try to reset the styling of the slider, to the state it was before the slider initialized.
    This does not work while an animation is running, and the styling is thus only "defaulted" when the slider is not animating.

    beforeAnimation:function (t, slider) { }

    This function runs before the animation (any animation) starts.
    Example usage: beforeAnimation: function(t){ alert($(this).html()); }
    The t variable is the number the slide have (the one the slider is animation towards). (As an example, the value of t is 2, when it's the second slide)
    The "slider" is the slider object, on which you can call methods defined in these docs.
    And the variable 'this' is the slide it is animating towards.
    If you are ajax-loading some content, the function wont run until all the content on the target slide has loaded.
    A lot of the complex animations will create clones of some of the slides just after this callback has run. So be careful with running asynchronous functions inside the beforeAnimation.
    You don't have to think about that in the afterAnimation callback.
    Example usage in demos

    afterAnimation:function (t, slider) { }

    Same as beforeAnimation. It's just runs after the animation (still any animation) has finished.
    "t" is the number of the slider, and "slider" the slider object, on which you can call methods defined in these docs.
    Example usage in demos

    initCallback:function () { }

    Runs when the slider has initialized. The this pointer is a reference to the sudoSlider object, so you can call methods like this.getSlide(1);
    Note that some methods like .setOption() re-initializes the slider, and the initCallback will run again if you use a method that re-initialize the slider (these methods are: setOption, setOptions, insertSlide, removeSlide and init).
    Example usage in demos

    destroyCallback:function () { }

    Runs when the slider is destroyed. The this pointer is a reference to the sudoSlider object, so you can call methods like this.getSlide(1);
    Note that some methods like .setOption() re-initializes the slider, and the destroyCallback will run again if you use a method that re-initialize the slider (these methods are: setOption, setOptions, insertSlide, removeSlide and destroy).

    loadStart: function () { }

    A function specified here will run when the script have to wait for a slide to load, when it tries to perform an animation.
    The function takes one argument, which is the slide the slider tries to animation to.
    The this variable is the same as the sudoSlider object.
    Note that this function will not run, if there's nothing to wait for (which is most of the time, since SudoSlider pr. default tries to preload the slides, see preloadAjax).

    loadFinish: function () { }

    Same as loadStart, only it is run after the load has finished.



    With this variable, you can set which ajax documents are loaded into the slides.
    Example usage is: ajax: ['images/01.jpg', 'somedocument.html', 'images/anotherpic.png', false, 'lastdocument.html']
    In that example, slide 1,2,3 and 5 is are ajax-enabled, and the ajax content is loaded into the slides, but slide number 4 isn't touched.
    If it's not an image, the document will be loaded into the slide using the jQuery .ajax function.
    You can set how the slides are preloaded with the option preloadAjax (just below).
    Example usage in demo
    Note that loading HTML documents tends not to work when testing on localhost.


    The default behaviour is that the script wait 100ms, after the last ajax-loading, then it preloads the next not-loaded slide.
    You can also set it to true, then the script will try to preload every slide from the beginning.
    If this option in set to false, the script will only load the visible slides.


    Sets the html that's shown before the ajax-content has been loaded.
    Example usage is: loadingText:'This document has yet to be loaded'


    Define the first slide to be shown. Example usage is startSlide:'2', which makes the slider show the second slide on load (the first slide is number '1', and not '0').

    ajaxload:function (t, img, slider) { }

    Using this variable, you can set a function to be run after something has been loaded into a slide. Any JavaScript can be used.
    The "this" variable is html of the slide, containing the image.
    Note that the function only runs, when ALL the content within the slide has loaded.
    Example usage:
    ajaxload: function(t, img){ alert($(this).html()); }
    The "t" variable is the number the slide have. (As an example, the value of t is 2, when it's the second slide)
    The "img" variable is if the content was loaded as an image or as a document. (If true, content was considered an image).
    The "slider" variable is the object which contains the slider, that you can call methods on.
    And the variable 'this' is the slide. Therefore, if you want to get the src of an image, this won't work "$(this).attr('src');" but this will $(this).children('img').attr('src');

    Full example

    With all options set to their default values.

            effect: "slide",
            speed: 1500,
            customLink: false,
            controlsFadeSpeed: 400,
            controlsFade: true,
            insertAfter: true,
            vertical: false
            slideCount: 1,
            moveCount: 1,
            startSlide: 1,
            responsive: true,
            ease: "swing",
            auto: false,
            pause: 2000,
            resumePause: false,
            continuous: false,
            prevNext: true,
            numeric: false,
            numericText: [],
            slices: 15,
            boxCols: 8,
            boxRows: 4,
            initCallback: function () {},
            destroyCallback: function () {},
            ajaxLoad: function () {},
            beforeAnimation: function () {},
            afterAnimation: function () {},
            history: false,
            autoHeight: true,
            autoWidth: true,
            updateBefore: false,
            ajax: false,
            preloadAjax: 100,
            loadingText: "",
            prevHtml: '<a href="#" class="prevBtn"> previous </a>',
            nextHtml: '<a href="#" class="nextBtn"> next </a>',
            controlsAttr: 'class="controls"',
            numericAttr: 'class="numericControls"',
            interruptible: false,
            useCSS: true,
            loadStart: function () {},
            loadFinish: function () {},
            touch: false,
            mouseTouch: false,
            touchHandle: false,
            allowScroll: true
  • Designers guide to Sudo Slider


    When using Sudo Slider, there's only one requirement to the HTML: That the each child element in the slider represents some content.
    Like this:

    <div id="slider">
        <div>Slide content</div>
        <div>Slide content</div>
        <div>Slide content</div>
        <div>Slide content</div>
        <div>Slide content</div>

    You can also have it all in an unordered list, then the list elements becomes slides.

    <div id="slider">

    When Sudo Slider loads, it makes some buttons, and adds some CSS classes, which easily can be targeted with CSS.
    This is the resulting HTML using the default configuration, first if you specified the content as an unordered list.

    <div id="slider">
        <ul class="slidesContainer">
            <li class="slide">Content</li>
            <li class="slide">Content</li>
            <li class="slide">Content</li>
            <li class="slide">Content</li>
            <li class="slide">Content</li>
    <span class="controls">
        <a href="#" class="nextBtn"> next </a>
        <a href="#" class="prevBtn"> previous </a>

    And if you just put a childs with content in.

    <div id="slider">
        <div class="slidesContainer">
            <div class="slide">Content</div>
            <div class="slide">Content</div>
            <div class="slide">Content</div>
            <div class="slide">Content</div>
            <div class="slide">Content</div>
    <span class="controls">
        <a href="#" class="nextBtn"> next </a>
        <a href="#" class="prevBtn"> previous </a>

    The Controls are positioned outside of the HTML, so that they won't conflict with the slider itself.

    And with every possible control enabled (still using the default configuration) the html ends up like this:

    <div id="slider">
    <span id="controlsid">
        <a href="#" class="nextBtn"> next </a>
        <a href="#" class="prevBtn"> previous </a>
        <a href="#" class="lastBtn"> last </a>
        <a href="#" class="firstBtn"> first </a>
        <ol class="controls">
            <li data-target="1" id="class="controls" class="current"><a href="#"><span>1</span></a></li>
            <li data-target="2" id="class="controls"><a href="#"><span>2</span></a></li>
            <li data-target="3" id="class="controls"><a href="#"><span>3</span></a></li>
            <li data-target="4" id="class="controls"><a href="#"><span>4</span></a></li>
            <li data-target="5" id="class="controls"><a href="#"><span>5</span></a></li>

    If you then read the document describing the different settings, you will see that much of this can be changed.
    Including inserting the controls before instead of after the slider using the option insertAfter
    In the next example, the option names for the various pieces of changeable HTML is shown instead of their default value.
    They are show like this: [optionname]

    <div id="slider">
    <span [controlsAttr]>
        <ol [numericAttr]>
            <li data-target="1" class="current"><a href="#"><span>1</span></a></li>
            <li data-target="2"><a href="#"><span>2</span></a></li>
            <li data-target="3"><a href="#"><span>3</span></a></li>
            <li data-target="4"><a href="#"><span>4</span></a></li>
            <li data-target="5"><a href="#"><span>5</span></a></li>

    I know that it's not possible to change the numeric controls a lot, but you can always use customLinks (see below), if you want more freedom.


    The customLink option is really interesting, because by using it, you have 100% freedom over the HTML of the controls.

    The value that goes into the customLink option, is a CSS selector, that targets the HTML you want to be a control.
    To be precise, it's jQuery selector, but just use it as an normal CSS selector.

    I usually use a value like customLink: 'a.customlink', to select links with the class "customlink" to be my controls.
    Remember that anything can be used, it doesn't have to be a link. And remember that one doesn't exclude the other, you can use ordinary controls and customLinks at the same time.

    But we also need to tell the slider what to do, that's done using the data-target tag like this:

    <a class="customlink" data-target="next">
        This link makes the slider go to the next slide

    The possible values of the data-target attribute are:

    • stop stops an automatic slideshow (if it is currently running).
    • start starts an automatic slideshow.
    • block blocks the slider from getting any user input.
    • unblock unblocks the slider.
    • next go to the next slide.
    • prev go to the previous side.
    • first go to the first slide.
    • last go to the last slide.
    • [number] go to the slide specified using a number. Instead of [number] you insert a number (like '1').

    A customLink can the anything, even the slider itself. (I here assume that the option customLink is set to 'li.customlink')

    <div id="slider">
            <li class="customlink" data-target="3">Content</li>

    That code will make the slider animate to the third slide, when you click anywhere on the first slide.

    Now you should know how to make the HTML and CSS for Sudo Slider, next is the animations.

    Animate the controls

    As you might have noticed, the numeric buttons in the demo change color when a buttons corresponding slide is selected.
    This happens because the numeric buttons gets a "current" class added (and removed later, when the button no longer matches the current slide).

    As always with controls, remember that there's no difference between customLinks and "normal" controls, everything explained here works on both.

    If you want to animate the next/previous/first/last buttons, then you can use the beforeAnimation and afterAnimation options
    It could look something like this:

        var sudoSlider = $("#slider").sudoSlider({
            prevNext: true,
            numeric: false,
            beforeAnimation: function(t){
                $('.nextBtn').stop().fadeTo(300, 0.3);
                $('.prevBtn').stop().fadeTo(300, 0.3);
            afterAnimation: function(t){
               if (t != 5) $('.nextBtn').stop().fadeTo(500, 1);
               if (t != 1) $('.prevBtn').stop().fadeTo(500, 1);

Help and support

If you need help, the first thing you should do is read the documentation.
Start with reading howto setup the slider if you are completely lost.

Donate to the project

I like my work, like to see a piece of code grow.
But humans doensn't live of air alone.
So if you like my creation, you should consider giving me a cup of coffee.

See the demos

The demos showcase just how much Sudo Slider can do.
They showcase features such as AJAX, fading, methods, captions automatic slidehow and a tabs.