My Slider

by doug65536

HTML

<button id="prev">Prev</button>
<button id="next">Next</button>
<div class="viewport">
    <div class="slider">
        <div class="imgdiv">
            <img class="sliderimg" data-src="http://pixelholdr.com/butt/598" />
        </div><div class="imgdiv">
            <img class="sliderimg" data-src="http://pixelholdr.com/water/598" />
        </div><div class="imgdiv">
            <img class="sliderimg" data-src="http://pixelholdr.com/grass/598" />
        </div><div class="imgdiv">
            <img class="sliderimg" data-src="http://pixelholdr.com/airplane/598" />
        </div><div class="imgdiv">
            <img class="sliderimg" data-src="http://pixelholdr.com/malibu/598" />
        </div><div class="imgdiv">
            <img class="sliderimg" data-src="http://pixelholdr.com/moon/598" />
        </div>
    </div>
</div>

CSS

html, body {
    position: relative;
}
.viewport {
    position: relative;
    width: 600px;
    height: 600px;
    background: #333;
    overflow: hidden;
    margin: none;
    padding: none;
}
.slider {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: left 0.33s;
    -webkit-transition: left 0.33s;
    margin: none;
    padding: none;
    white-space: nowrap;
}
.imgdiv {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: inline-block;
    margin: none;
    padding: none;
}
.sliderimg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    margin: none;
    display: inline-block;
}

JavaScript

$(function () {
    var image_slider = function (options) {
        var next_button, prev_button;
        var cur_index = 0;

        var opt = options === undefined ? {} : options;

        // Functions
        var move_to, anim_complete, load_next_image, load_handler;

        var viewport = $(opt.viewport);
        var viewport_w = viewport.width();
        var viewport_h = viewport.height();

        var slider = viewport.find(opt.slider);
        var img_divs = slider.find('.imgdiv');
        var image_count = img_divs.length;

        var pending_loads = img_divs.slice(0);

        load_handler = function (img) {
            return function () {
                console.log("fading in " + img.attr('src'));
                img.fadeIn();
                load_next_image();
            };
        };

        load_next_image = function () {
            if (pending_loads.length === 0) {
                return;
            }
            var img = $(pending_loads[0]).find('img');
            pending_loads = pending_loads.slice(1);

            var src = img.data('src');
            console.log('Loading ' + src);
            img.on('load', load_handler(img));
            img.attr('src', src);
        };

        if (opt.next_button) {
            next_button = $(options.next_button);
            prev_button = $(options.prev_button);

            $(next_button).on('click', function () {
                move_to(cur_index + 1);
            });
            $(prev_button).on('click', function () {
                move_to(cur_index - 1);
            });
        }

        move_to = function (index) {
            console.log('before index ' + index);
            index = (index < 0) ? (index + image_count) : index;
            index = (index >= image_count) ? (index - image_count) : index;
            console.log('after  index ' + index);
            cur_index = index;

            slider.css({
                left: (-index * viewport_w) + 'px'
            });
        };

  ...