Iterate through each attribute in Jquery loop

I am currently busy with a homemade JQuery slider. For a client i would like to change every slide based on the position on the webpage. When i am on the 1st scene, and click on next, i'd like to show the 2nd scene, and so on. When i am on the sixt scene i would like to get back to the first scene.

I tried several things, but somehow i can't find a solution. Hope you guys can point me in the right direction.

    <div id="-scene-wrapper">  
        <a href="#" class="previous"><h2>Back</h2></a> 
        <a href="#" class="next"><h2>Next</h2></a>  
        <div id="scene1" class="scenes">
            <h2>Scene 1</h2>
        </div>
        <div id="scene2" class="scenes">
            <h2>Scene 2</h2>
        </div>
        <div id="scene3" class="scenes">
            <h2>Scene 3</h2>
        </div>
        <div id="scene4" class="scenes">
            <h2>Scene 4</h2>
        </div>
        <div id="scene5" class="scenes">
            <h2>Scene 5</h2>
        </div>
        <div id="scene6" class="scenes">
            <h2>Scene 6</h2>
        </div>
    </div>

$(window).scroll(function () {
    $(".scenes").each(function (index) {
        $.fn.isInViewport = function () {
            var ScrollTop = $(window).scrollTop();
            console.log(ScrollTop);
        };

        $('.next').click(function(event){
            event.preventDefault();
            console.log(index);
            //Magic code 
        })

        $('.previous').click(function(event){
            event.preventDefault();
            console.log(index);
            //Magic code 
        })
    });
});