Horizontal Slider with Mouse

by kthornbloom

HTML

<div class="hslide">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
<br>
<div class="result2"></div>
<div class="result"></div>

CSS

.hslide {
    width:100%;
    overflow:hidden;
}
.hslide-stage {
    white-space:nowrap;
    font-size:0;
    position:relative;
    left:0px;
}
.hslide-scroll {
    background:#222;
    border:1px solid #000;
    border-radius:10px;
}
.hslide-thumb {
    width:40px;
    height:10px;
    background:#ccc;
    border-radius:10px;
}
.item {
    display:inline-block;
    width:150px;
    height:100px;
    background:#505050;
    font-size:12px;
    color:#fff;
    text-align:center;
    box-shadow:inset 0 0 0 1px #fff;
}

JavaScript

$('.hslide').wrapInner('<div class="hslide-stage" />');

function runIt() {
    $('.hslide-stage').css('left','-=1');
}

$('.hslide').mousemove(function (e) {
    var stageOffset = $('.hslide').offset(),
        viewW = $('.hslide').outerWidth(),
        stageW = 150 * ($('.item').length),
        mouseX = ((e.pageX - Math.round(stageOffset.left)) / viewW).toFixed(2)*100;

    if (30 >= mouseX) {
        $('.result2').html('backitupbackitup');
        setTimeout(runIt, 500);
    } else if (mouseX >= 70) {
        $('.result2').html('forward');
    } else {
        $('.result2').html('stop');
    }

    $('.result').html('Mouse Pos ' + mouseX + '<br>View Width ' + viewW + '<br>Stage Width ' + stageW);
});