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

2. Include the JavaScript

<script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>

3. Run the slider

<script>
$(document).ready(function(){
   var sudoSlider = $("#slider").sudoSlider({
      numeric: true
   });
});
</script>

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's 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 you've started it.

You do that by doing something like this:

sudoSlider.goToSlide(1);

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

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.
    sudoSlider.removeSlide(2);

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

    // 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).
    sudoSlider.stopAnimation();
    

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]

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:[]

customLink:false

insertAfter: true

slideCount:1

moveCount:1

effect:"slide"

useCSS:true

interruptible:false

vertical:false

responsive:true

touch:false

mouseTouch:false

touchHandle:false

allowScroll:true

speed: 1500

ease:'swing'

CSSease:'swing'

auto:false

pause: '2000'

resumePause:false

continuous:false

updateBefore: false

history:false

autoHeight:true

autoWidth:true

performanceMode:0

beforeAnimation:function (t, slider) { }

afterAnimation:function (t, slider) { }

initCallback:function () { }

destroyCallback:function () { }

loadStart: function () { }

loadFinish: function () { }

ajax:false

preloadAjax:100

loadingText:''

startSlide:false

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

With all options set to their default values.

$(document).ready(function(){
    $("#slider").sudoSlider({
        effect: "slide",
        speed: 1500,
        customLink: false,
        controlsFadeSpeed: 400,
        controlsFade: true,
        insertAfter: true,
        vertical: false
        slideCount: 1,
        moveCount: 1,
        startSlide: 1,
        responsive: true,
        ease: "swing",
        CSSease:'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

Controls

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>
</div>

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

<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, 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>
    </ul>
</div>
<span class="controls">
    <a href="#" class="nextBtn"> next </a>
    <a href="#" class="prevBtn"> previous </a>
</span>

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>
    </div>
</div>
<span class="controls">
    <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 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>
    </ol>
</span>

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">
    <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 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>
    </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 data-target tag like this:

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

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">
    <ul>
        <li class="customlink" data-target="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.

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:

$(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);
        }
    });
});