SO - 21696133

by andrey90vs

HTML

<div>
    <button class="right">Right</button>
    <button class="left">Left</button>
</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>

JavaScript

jQuery(document).ready(function () {
    var boxes = jQuery(".box").get(),
        current = 0,
        timer;

    jQuery('.right').click(function () {
        if (current == (-boxes.length + 1)) {
            current = 0;
        } else {
            current--;
        }
        updateBoxes();
    }).click(); //initialize the view

    jQuery('.left').click(function () {
        if (current === 0) {
            current = -boxes.length + 1;
        } else {
            current++;
        }
        updateBoxes();
    });

    function updateBoxes() {
        //custom implementation for testing
        console.log('show', current)
        $(boxes).hide().eq(-current).show();
        
        autoPlay();
    }

    function autoPlay() {
        clearTimeout(timer);
        //auto play
        timer = setTimeout(function () {
            jQuery('.right').click();
        }, 2500)
    }

});