panorama slide

by Akram kamal

HTML

<div class="container"></div>
<button class="left">&#9664;</button>
<button class="pause">&#10074;&#10074;</button>
<button class="right">&#9654;</button>

CSS

.container {
    background:url(http://www.thepetedesign.com/demos/panorama_viewer/demo_photo.jpg);
    height:600px;
    background-position:0 50%;
}

JavaScript

function toLeft() {
    $('.container').animate({
        'background-position': '+=1'
    }, 1, 'linear', toLeft);
}

function toRight() {
    $('.container').animate({
        'background-position': '-=1'
    }, 1, 'linear', toRight);
}


$(function () {

    $(".pause").click(function () {
        $('.container').stop();
    })

    $(".left").click(function () {
        $('.container').stop();
        toLeft();
    })

    $(".right").click(function () {
        $('.container').stop();
        toRight();
    })

    $('.container').mousedown(function (e) {
        $('.container').stop();
        var landing = e.clientX;
        var pos = parseInt($(this).css("background-position"));
        $(this).mousemove(function (e) {
            var delta = landing - e.clientX
            $(this).css({
                'background-position': pos - delta
            });
        }).mouseup(function () {
            $(this).off("mousemove");
        });

    })
})