Basic Carousel

by kuyabiye

HTML

<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>

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);
        }

    }
};



window.onload = function () {
    var carousel = new Carousel('.js-slider', 4000);
}