Howto setup Sudo Slider

If you are 100% lost, copy the basic example, and make sure that the links to the JavaScript and the css works, because i here assume that you already have a working setup of Sudo Slider.

You start the slider by running a script that looks like this:

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

Here a ready to use example:

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

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

You do that by doing something like this:

<script>
$(document).ready(function(){	
    sudoSlider.goToSlide(1);
});
</script>

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.

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, [speed]); Animate to slide [a] (1 is the first, and 'next', 'prev', 'first' and 'last' also works). If "speed" is set, the animations will take "speed" (where "speed" is a number) milliseconds to complete.
• .block(); Blocks any user input.
• .unblock(); Removes the above mentioned block.
• .startAuto(); Starts an automatic slideshow.
• .stopAuto(); Stop the automatic slideshow.
• .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. Accepted value names: 'currentSlide', 'totalSlides', 'clickable', 'autoAnimation' and 'destroyed'.

Below are example usage the different methods.

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

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

All options and what they do

[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>'

firstShow: false

firstHtml:'<a href="#" class="firstBtn"> first </a>'

lastShow: false

lastHtml:'<a href="#" class="lastBtn"> last </a>'

numeric:false

numericAttr:'class="controls"'

numericText:['1']

customLink:false

insertAfter: true

currentFunc:false

uncurrentFunc:false

slideCount:1

moveCount:1

vertical:false

speed:'800'

ease:'swing'

auto:false

pause: '2000'

resumePause:false

continuous:false

clickableAni:false

updateBefore: false

history:false

speedhistory:'400'

autoheight:true

autowidth:true

fade: false

fadespeed:'1000'

crossFade:true

beforeAniFunc:false

afterAniFunc:false

ajax:false

preloadAjax:100

loadingText:'Loading Content...'

startSlide:false

ajaxLoadFunction:false

With all options set to their default values.

$(document).ready(function(){    
    $("#slider").sudoSlider({ 
        prevNext:          true,
        prevHtml:          '<a href="#" class="prevBtn"> previous </a>',
        nextHtml:          '<a href="#" class="nextBtn"> next </a>',
        controlsShow:      true,
        controlsAttr:      'id="controls"',
        controlsFadeSpeed: '400',
        controlsFade:      true,
        insertAfter:       true,
        firstShow:         false,
        firstHtml:         '<a href="#" class="firstBtn"> first </a>',
        lastShow:          false,
        lastHtml:          '<a href="#" class="lastBtn"> last </a>',
        numericAttr:       'class="controls"',
        numericText:       ['1'],
        vertical:          false,
        speed:             '800',
        ease:              'swing',
        auto:              false,
        pause:             '2000',
        continuous:        false,
        clickableAni:      false,
        numeric:           false,
        updateBefore:      false,
        history:           false,
        speedhistory:      '400',
        autoheight:        true,
        autowidth:         true,
        customLink:        false,
        fade:              false,
        crossFade:         true,
        fadespeed:         '1000',
        ajax:              false,
        loadingText:       false,
        preloadAjax:       false,
        startSlide:        false,
        ajaxLoadFunction:  false,
        beforeAniFunc:     false,
        afterAniFunc:      false,
        uncurrentFunc:     false,
        currentFunc:       false,
        slideCount:        1,
        moveCount:         1
    });
});

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 beforeAniFunc and afterAniFunc
It could look something like this:

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