Scroller simples

by Felype Rennan

HTML

<div class="iae-flip">
    <div id="f1" class="flip-content" 
        data-imagem="http://fc09.deviantart.net/fs70/i/2010/156/8/4/Blue_Nebula_by_PJuric.jpg">
        <p>Lorem Ipsum</p>
    </div>
    <div id="f2" class="flip-content" 
        data-imagem="http://annesastronomynews.com/wp-content/uploads/2012/02/The-Cave-Nebula-Sh2-155-by-Adam-Block.jpg">
        <p>Dolor sit amet</p>
    </div>
    <div id="f3" class="flip-content" 
        data-imagem="http://sunshinedrugs.com/wp-content/uploads/2015/03/Beautiful-Black-BMW-Cars.jpg">
         <h1>Um titulo</h1>

        <p>uma descrição</p>
    </div>
    <div id="f4" class="flip-content" 
        data-imagem="http://s.hswstatic.com/gif/faster-speed-of-light-1.jpg">
        <h1>É muito rápido!</h1>
        <p>Em browsers e smartphones!</p>
    </div>
</div>
<button id="prev">prev</button>
<button id="next">next</button>

CSS

.iae-flip {
    width: 80vw;
    height: 80vh;
    background: black;
    margin: 0;
    padding: 0;
    color: silver;
    overflow: hidden;
    perspective: 1000px;
}
.iae-flip .flip-content {
    transition: 2s ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
    background: grey;
    margin: 0;
    padding: 0;
    color: silver;
    opacity: 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transform: translateX(0);
}
.iae-flip > .flip-content > p {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    width: 100%;
    text-align: right;
    min-height: 12vh;
    background: rgba(6, 6, 6, 0.6);
    padding: 16px;
}
.iae-flip .flip-content > h1 {
    text-shadow: 0px 0px 4px black;
    color: white;
    margin-left: 16px;
}
.iae-flip .flip-content.current {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.iae-flip .flip-content.right {
    opacity: 0;
    transform: translateY(100%) scale(0.9);
}
.iae-flip .flip-content.left {
    opacity: 0;
    transform: translateY(-100%) scale(1.1);
}

JavaScript

$(document).ready(function () {
    $.fn.exists = function () {
        return this.length !== 0;
    }
    var timer = undefined;
    $(".flip-content").each(function() {
        $(this).css("background-image", "url('"+$(this).data("imagem")+"')" );
    });
    
    function prevFrame() {
    		console.log($(".flip-content.current"));
    		console.log($(".flip-content.current").prev());
        var v = $(".flip-content.current").prev();
        if(v.length == 0)
        	v=$(".flip-content").last();
        $(".flip-content").removeClass("current");
        $(".flip-content").removeClass("right");
        $(".flip-content").removeClass("left");
        v.nextAll().addClass("right");
        v.prevAll().addClass("left");
        v.addClass("current");
        resetTimer();
    }

    function nextFrame() {
        var v = $(".flip-content.current").next();
        if(v.length == 0)
        	v=$(".flip-content").first();
        $(".flip-content").removeClass("current");
        $(".flip-content").removeClass("right");
        $(".flip-content").removeClass("left");
        v.nextAll().addClass("right");
        v.prevAll().addClass("left");
        v.addClass("current");
        resetTimer();
    }

    function resetTimer() {
        if (timer != undefined) {
        	clearInterval(timer);
        }
        timer = window.setInterval(function () {
            nextFrame();
        }, 3000);
    }
    
    nextFrame();
    resetTimer();
    
    $("#next").click(function () {
        nextFrame();
    });
    
    $("#prev").click(function () {
        prevFrame();
    });

});