Slider

by ZenMaster

HTML

<button id="prev" style="float: left;">Prev</button>
<div class="container">
    <div id="slider" class="slider">
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
    </div>
</div>
<button id="next" style="clear: left;">Next</button>

CSS

.container
{
    width: 100px;
    overflow: hidden;
    float: left;
}

.slider
{
    height: 50px;
    width: 150px;
    position: relative;
    overflow: hidden;
}

.red
{
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}

.green
{
    width: 50px;
    height: 50px;
    background-color: green;
    float: left;
}

.blue
{
    width: 50px;
    height: 50px;
    background-color: blue;
    float: left;
}

JavaScript

var prev = document.getElementById('prev');
var next = document.getElementById('next');
var slider = document.getElementById('slider');
var current = 1;
var total = 3;

function manageControls()
{
    if(current == 1)
    {
        this.prev.disabled = 'disabled';
    }
    else
    {
        this.prev.disabled = '';
    }
    if(current == total)
    {
        this.next.disabled = 'disabled';
    }
    else
    {
        this.next.disabled = '';
    }
}

manageControls();

next.addEventListener('click', function() {
    var leftPosition = +slider.style.left.split('px')[0];
    leftPosition -= 50; 
    slider.style.left = leftPosition + 'px';
    current++;
    manageControls();
});

prev.addEventListener('click', function() {
    var leftPosition = +slider.style.left.split('px')[0];
    leftPosition += 50; 
    slider.style.left = leftPosition + 'px';
    current--;
    manageControls();
});