how-to-set-infinite-loop-slideshow-on-tumblr-header

by dekkard

HTML

<div id="slides">
    <div class="slides">1111</div>
    <div class="slides" style="display: none;">2222</div>
    <div class="slides" style="display: none;">3333</div>
    <div class="slides" style="display: none;">4444</div>
</div>
<div> 
    <a href="#" id="prev">Prev</a>
    <a href="#" id="next">Next</a>
</div>

CSS

.slides {
    display: block;
    position: absolute;
    top: 100px;
    
    width: 100px;
    height: 100px;
    
    background-color: lightgreen;
    border: 1px solid green;
    
    text-align: center;
}

a#next, a#prev {
    display: inline-block;
    background-color: lightblue;
    width: 50px;
    padding: 10px;
}

JavaScript

var interval;
$(document).ready(function () {
    interval = setInterval(getNext, 3000);
    $("a#next").on('click', getNext);
    $("a#prev").on('click', getPrev);
});

function getNext() {
    var $curr = $("#slides .slides:visible"),
        $next = ($curr.next().length) ? $curr.next() : $("#slides .slides").first();
    transition($curr, $next);
}

function getPrev() {
    var $curr = $("#slides .slides:visible"),
        $next = ($curr.prev().length) ? $curr.prev() : $("#slides .slides").last();
    transition($curr, $next);
}

function transition($curr, $next) {
    //clearInterval(interval);
    $next.css("z-index", 8).fadeIn("medium", function () {
        $curr.fadeOut().css("z-index", 0);
        $next.css("z-index", 7);
    });
}