jQuery slider for horizontal images scrolling

This is totally haphazard post, was created during the absolute idleness.
I believe that everyone saw this “trick” many times – horisontal slider scrolls horizontal line of images.
Here is simple markup

<div class="scrollableContainer">
    <div class="content">
        <div class="scrollableContent">
            <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 class="item">10</div>
        </div>
    </div>
    <div class="slider"></div>
</div>
<div class='console'></div>

we gonna use numbers instead of images (imagine that these numbers are images for the poor)

some styles:

.scrollableContainer {
    width: 500px;
    height: 200px;
}
.scrollableContainer .content {
    border: 2px solid #999;
    border-radius: 5px;
    height: 100px;
    width: 500px;
    overflow: hidden;
}
.scrollableContainer .scrollableContent {
    font-size: 30px;
    margin-left: 0px;
    width: 1000px;
}
.scrollableContainer .scrollableContent .item {
    font-size: 50px;
    font-weight: bold;
    border: 5px solid grey;
    border-radius: 5px;
    width: 70px;
    height: 70px;
    margin: 10px;
    text-align: center;
    float: left;
}
.scrollableContainer .slider {
    width: 300px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
 
/* overridings for jquery UI styles: */
.scrollableContainer .slider .ui-slider-handle.ui-state-default.ui-corner-all {
    border: 4px solid #999;
    border-radius: 50%;
    cursor: pointer;
}
 
.scrollableContainer .slider.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content {
    background: #ddd;
}

and here is the magic:

$(function() {
    $( ".slider" ).slider({
        slide: function( event, ui ) {
            $('.console').text(ui.value);
            $('.scrollableContent').css('margin-left', -ui.value * 4);
        }
    });
});

How it works – div with width 1000 px is inside of the div with smaller fixed width and “overflow: hidden”, and we just need to change “margin-left: -X” of the internal div depending on the slider’s position.

Here is my fiddle http://jsfiddle.net/TGEQf/

Social Share Toolbar