Basic Carousel

by kuyabiye

HTML

<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.12.0.css">
<script src="http://code.jquery.com/qunit/qunit-1.12.0.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture">
    <div id="ntstest" class="js-slider slider">
    <img class="js-item slider-item" src="http://lorempixum.com/250/250/sports/1" alt="image 1" />
    <img class="js-item slider-item" src="http://lorempixum.com/250/250/sports/2" alt="image 2" />
    <img class="js-item slider-item" src="http://lorempixum.com/250/250/sports/3" alt="image 3" />
    <img class="js-item slider-item" src="http://lorempixum.com/250/250/sports/4" alt="image 4" />
    <img class="js-item slider-item" src="http://lorempixum.com/250/250/sports/5" alt="image 5" />
</div>
    
</div>

CSS

.slider {
    height: 250px;
    width: 250px;
    overflow: hidden; /* fouc */
    
    
    /* absolute center */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.slider-item {
    float: left;
    border-radius: 100%;
}

JavaScript

function Carousel(el, interval) {
    var slider = document.querySelector(el),
        items = slider.querySelectorAll('.js-item'),
        itemsLength = items.length,
        order = 0;


    function _toggle(diff) {

        items[order].style.display = 'none';

        order = order + diff;
        if (order === itemsLength) {
            order = 0;
        }

        if (order < 0) {
            order = itemsLength - 1;
        }
        items[order].style.display = 'block';

    }

    function _init() {
        for (var i = 1; i < itemsLength; i++) {
            items[i].style.display = 'none';
        }

        setInterval(function () {
            _toggle(1);
        }, interval);
    };

    _init();

    return {

        next: function () {
            _toggle(1);
        },
        prev: function () {
            _toggle(-1);
        },
        go: function (order) {
            _toggle(order);
        }

    }
};


test("init", function() {
    var carousel = new Carousel('.js-slider');
    ok(carousel, "inited");
});

test("next", function() {
    var carousel = new Carousel('.js-slider');
    carousel.next();
    ok($('js-slider').find('.js-item').eq(1).is(':visible'), "next item");
});