jQuery.DIYSlider demo

More information, documentation and download on the project's page : http://pioul.fr/jquery-diyslider/

HTML

<script src="http://pioul.fr/ext/jquery-diyslider/jquery.diyslider.min.js"></script>
<div class="slider"><!-- the slider -->
    <div><!-- a mandatory div used by the slider -->
        <!-- each div below is considered a slide -->
        <div><img src="http://placekitten.com/g/400/300"/></div>
        <div><img src="http://placekitten.com/g/400/200"/></div>
        <div><img src="http://placekitten.com/g/200/300"/></div>
        <div><img src="http://placekitten.com/g/300/200"/></div>
    </div>
</div>

<!-- some buttons used for the example -->
<div id="counter">
    <form>
        <input type="text" class="current-slide"/> /
        <span class="total-slides"></span>
        <input type="submit" value="Go to slide"/>
    </form>
</div>
<p>
    <span class="slider-direction-buttons">
        <a href="#" data-toslide="back">Back</a> -
        <a href="#" data-toslide="forth">Forth</a> -
        <a href="#" data-toslide="back" data-instant="1">Instant Back</a> -
        <a href="#" data-toslide="forth" data-instant="1">Instant Forth</a>
    </span>
</p>
<p id="message"></p>

CSS

body {
    background-color: #eee;
    margin: 20px;
    padding: 0;
}
.slider {
    background-color: #fff;
    height: 500px;
    margin-bottom: 20px;
}
.slider > div > div {
    border: 5px solid #222;
    border-radius: 2px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.slider > div > div:nth-child(even) {
    border-color: grey;
}
#counter input[type="submit"] {
    margin-left: 20px;
}
#counter input[type="text"] {
    width: 40px;
    text-align: center;
}

JavaScript

// we're first binding some stuff and then initializing the slider

// buttons handlers using the .move method of DIYSlider
$(".slider-direction-buttons > a").bind("click", function(e){
    e.preventDefault();
    var instant = $(this).data("instant")? true : false;
    $(".slider").diyslider("move", $(this).data("toslide"), instant); // slide
});

// print a message when the slider starts moving
$(".slider").bind("moving.diyslider", function(event, slide, slideNumber, actuallyMoved){
    $("#message").text("Moving to slide #"+ slideNumber);
});

// hide the message when the slider ends moving, and update the counter
$(".slider").bind("moved.diyslider", function(event, slide, slideNumber, actuallyMoved){
    $("#message").text("");
    $("#counter .current-slide").val(slideNumber);
});

// show an alert when the slider is resized
$(".slider").bind("resized.diyslider", function(event, dimensions){
    alert("I've just been resized to "+ dimensions.w +" x "+ dimensions.h);
});

// jump to the slide entered in the counter when the form is submitted
$("#counter > form").bind("submit", function(e){
    e.preventDefault();
    $(".slider").diyslider("move", $(this).children(".current-slide").val());
});

// initialize the slider
$(".slider").diyslider();
$(".slider").diyslider("updateOptions", {
 
    animationDuration: 1000,
    display: 2,
    loop: false,
    animationAxis:"x",
    animationEasing: 'swing'
});

// set the counter's slides count once the slider has been initialized
$("#counter .total-slides").text($(".slider").diyslider("getSlidesCount"));