Panel Slider

Some JS to slide horizontal panels.

by mlms13

HTML

<div id="container">
    <div id="holder">
        <div class="frame">
        </div>
        <div class="frame">
        </div>
        <div class="frame">
        </div>
    </div>
</div>

CSS

body {
    background: #eee;
    margin: 30px;
}
#container {
    height: 300px;
    overflow: hidden;
    width: 300px;
}
#holder {
    width: 900px;
}
#container .frame {
    background: #fff;
    border: 5px solid red;
    float: left;
    height: 290px;
    width: 290px;
}
#container .frame:first-child {
    border-color: blue;
}
#container .frame:last-child {
    border-color: green;
}

JavaScript

var btn, holder, container;

holder = document.getElementById('holder');
container = document.getElementById('container');

//

btn = document.createElement('button');
btn.appendChild(document.createTextNode('Slide'));
btn.onclick = function () {
    var destination = container.scrollLeft + 300,
        interval,
        scroller = function () {
            if (container.scrollLeft < destination) {
                container.scrollLeft += 15;
            } else {
                window.clearInterval(interval);
            }
        };
    interval = window.setInterval(scroller, 15);
};
document.body.appendChild(btn);