jQuery.DIYSlider demo 3

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

by pioul

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/jquery.hammer.min.js"></script>
<script src="http://pioul.fr/ext/jquery-diyslider/jquery.diyslider.min.js"></script>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"><!-- necessary for mobile web apps -->

<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 class="overlay"></div><!-- used to add a transparent screen on top of the slider to avoid dragging the images instead of the slider itself on desktop browsers -->
</div>

CSS

body {
    background-color: #eee;
    margin: 20px;
    padding: 0;
}

.slider {
    position: relative;
    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;
}

.slider > .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

JavaScript

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

// buttons handlers using the .move method of DIYSlider
$(".slider > .overlay").hammer().bind("swipe", function(e){
    e.gesture.preventDefault();
    var direction = (e.gesture.direction == "left")? "forth" : "back";
    $(".slider").diyslider("move", direction); // 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);
});

// initialize the slider
$(".slider").diyslider();