Simple sliding panel

by doug65536

HTML

<div id="demo" class="viewport">
    <div class="slider">
        <div class="slide">
            Slide 1
        </div>
        <div class="slide">
            Slide 2
        </div>
        <div class="slide">
            Slide 3
        </div>
        <div class="slide">
            Slide 4
        </div>
    </div>
</div>
<button class="slidecontrol" data-direction="prev">Prev</button>
<button class="slidecontrol" data-direction="next">Next</button>

CSS

.viewport {
    position: relative;
    width: 1024px;
    height: 500px;
    overflow: hidden;
}
.slider {
    position: relative;
    width: 400%;
    height: 100%;
}
.slide {
    display: inline-block;
    width: 25%;
    height: 100%;
}

JavaScript

$(function() {
    var init_slider = function(viewport_selector) {
        var viewport = $(viewport_selector);
        var slider = viewport.find('.slider');
        var cur_slide = 0;
        var slide_width = viewport.width();
        $('.slidecontrol').on('click', function() {
            var item = $(this);
            var dir = item.data('direction');
            var new_slide = cur_slide;
            switch (dir) {
                case 'next':
                    new_slide -= slide_width;
                    break;
                case 'prev':
                    new_slide += slide_width;
                    break;
            }
            cur_slide = new_slide;
            slider.animate({left: new_slide + 'px'}, {queue:false});
        });
    };
    
    init_slider('#demo');
});