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 content</div>
   <div><img src="../images/03.jpg" alt="image description"/></div>
</div>

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

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

2. Include the JavaScript

<script type="Text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></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

<script>
$(document).ready(function(){	
    var sudoSlider = $("#slider").sudoSlider({
        option1: setting1,
        option2: setting2,
        option3: setting3,
        option4: setting4
    });
</script>

Here an example with a couple of options set:

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

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.

Methods

Methods is what you use, if you want the slider to do somethings after Init.

You do that by doing something like this:

sudoSlider.goToSlide(1);

This offcource 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.
• .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 with numtext (it's optional), you can set the associated numericText.
• .removeSlide(pos);Removes a slide.
• .goToSlide(a); Animate to slide [a] (1 is the first, and 'next', 'prev', 'first' and 'last' also works).
• .getSlide(number); Gets the jQuery object for the specific slide (1 is the first). When using continuous this jQuery object will contain all the "continuous-clones".
• .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.
• .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 "fade".
    var fade = sudoSlider.getOption('fade');

    // Set the option "fade" to true.
    sudoSlider.setOption('fade', 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.
    sudoSlider.removeSlide(2);

    // The slider animates to slide number 3.
    sudoSlider.goToSlide(3);

    // Returns the jQuery object for the 2nd slide
    var slide = sudoSlider.getSlide(2);

    // User input is blocked (the controls)
    sudoSlider.block();

    // User input is unblocked.
    sudoSlider.unblock();

    // Starts a slideshow.
    sudoSlider.startAuto();

    // Stops an automatic slideshow.
    sudoSlider.stopAuto();

    // Adjusts the slider, if anything has been changed (like the image size).
    sudoSlider.adjust();

    // The slider is destroyed.
    sudoSlider.destroy();

    // Build it again.
    sudoSlider.init();

    // 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');

    // Stop the current animation
    sudoSlider.stopAnimation();
    

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

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]

controlsShow:true

controlsFade: true

controlsFadeSpeed: '400'

controlsAttr:'id="controls"'

prevNext:true

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

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

numeric:false

numericAttr:'class="controls"'

numericText:['1']

customLink:false

insertAfter: true

slideCount:1

moveCount:1

effect:"slide"

vertical:false

responsive:false

speed:'800'

ease:'swing'

auto:false

pause: '2000'

resumePause:false

continuous:false

updateBefore: false

history:false

autoheight:true

autowidth:true

beforeanimation:false

afteranimation:false

initCallback:false

ajax:false

preloadAjax:100

loadingText:''

startSlide:false

ajaxload:false

With all options set to their default values.

$(document).ready(function(){    
    $("#slider").sudoSlider({ 
        effect:            FALSE,
        speed:             800,
        customlink:        FALSE,
        controlsshow:      TRUE,
        controlsfadespeed: 400,
        controlsfade:      TRUE,
        insertafter:       TRUE,
        vertical:          FALSE,
        slidecount:        1,
        movecount:         1,
        startslide:        1,
        responsive:        FALSE,
        ease:              'swing',
        auto:              FALSE,
        pause:             2000,
        resumepause:       FALSE,
        continuous:        FALSE,
        prevnext:          TRUE,
        numeric:           FALSE,
        numerictext:       [],
        slices:            15,
        boxcols:           8,
        boxrows:           4,
        initcallback:      EMPTY_FUNCTION,
        ajaxload:          EMPTY_FUNCTION,
        beforeanimation:   EMPTY_FUNCTION,
        afteranimation:    EMPTY_FUNCTION,
        history:           FALSE,
        autoheight:        TRUE,
        autowidth:         TRUE,
        updatebefore:      FALSE,
        ajax:              FALSE,
        preloadajax:       100,
        loadingtext:       '',
        prevhtml:          ' previous ',
        nexthtml:          ' next ',
        controlsattr:      'id="controls"',
        numericattr:       'class="controls"'
    });
});

Designers guide to Sudo Slider

Controls

When using Sudo Slider, there's only one requirement to the HTML: That the slider is a div, with a unordered list inside.
Like this:

<div id="slider">
    <ul>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
    </ul>
</div>

When Sudo Slider loads, it makes some buttons, which easily can be targeted with CSS.
This is the resulting HTML using the default configuration.

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

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">
    <ul>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
    </ul>
</div>
<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 rel="1" id="class="controls" class="current"><a href="#"><span>1</span></a></li>
        <li rel="2" id="class="controls"><a href="#"><span>2</span></a></li>
        <li rel="3" id="class="controls"><a href="#"><span>3</span></a></li>
        <li rel="4" id="class="controls"><a href="#"><span>4</span></a></li>
        <li rel="5" id="class="controls"><a href="#"><span>5</span></a></li>
    </ol>
</span>

If you then read the document descriping 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">
    <ul>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
    </ul>
</div>
<span [controlsAttr]>
    [nextHtml]
    [prevHtml]
    [lastHtml]
    [firstHtml]
    <ol [numericAttr]>
        <li rel="1" class="current"><a href="#"><span>1</span></a></li>
        <li rel="2"><a href="#"><span>2</span></a></li>
        <li rel="3"><a href="#"><span>3</span></a></li>
        <li rel="4"><a href="#"><span>4</span></a></li>
        <li rel="5"><a href="#"><span>5</span></a></li>
    </ol>
</span>

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.

customLink

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 rel tag like this:

<a class="customlink" rel="next">
    This link makes the slider go to the next slide
</a>

The possible values of the rel 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">
    <ul>
        <li class="customlink" rel="3">Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
    </ul>
</div>

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.

But there's also a function that fires when an numeric control gets the "current" class, and when it's removed.
They are: currentFunc and uncurrentFunc
And with them, you can make any animation with the numeric controls.

I got a quick demo that uses them both.

This all happens after the animation is complete (at least with the default settings, it can be changed using the updateBefore option).

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

 
$(document).ready(function(){	
    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);
        }
    });
});