"next" and "previous" button with attached content for div

Question

I have a problem with backstretch. I want a slideshow, that has a div with text for each image.

I got that working, but when I tried to add "next" and "previous" button, only "next" button works, "previous" button is misbehaving and I can't see the error.

Please, see this fiddle to see my code: Fiddle

I couldn't get the fiddle to work, but it runs fine on my computer. EDIT: The fiddle is working!

        // Backstretch
    $("#slide").backstretch([
        "http://www.picturesnew.com/media/images/images-background.jpg",
        "http://static3.businessinsider.com/image/52a0bbfd6bb3f7961363819e/the-most-amazing-satellite-images-of-the-year.jpg",
        "http://www.afranko.org/wp-content/uploads/2013/10/13ead58cc4daab6e794c1e895004e4e4.jpg",
        "http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg"], {
        fade: 750,
        duration: 4000
    });

    // Backstretch text overlay
    var obj = $(".overlay");
    var arr = $.makeArray(obj);
    var y = arr.length;
    var x = 0;
    var u = 0;

    $(".overlay").hide().eq(x).show();
    $("#c2").text(y);
    $("#c3").text(u);

    $(window).on("backstretch.before", function (e, instance, index) {
        // If previous, then skip x + 1
        if (u === 0) {
            x = x + 1;

            // If x is larger than y, start from 0
            if (x >= y) {
                x = 0;
            }
        } else {
            u = 0;
        }

        $(".overlay").fadeOut(500);

        $("#c1").text(x);
        $("#c3").text(u);
    });


    $(window).on("backstretch.show", function (e, instance) {
        $(".overlay").eq(x).fadeIn(750);
    });

    // Backstretch controls
    $("#next").click(function (z) {
        //            z.preventDefault();
        $("#slide").data("backstretch").next();

        $("#c1").text(x);
    });

    $("#prev").click(function (z) {
        //            z.preventDefault();
        $(".overlay").fadeOut(500);
        $("#slide").data("backstretch").prev();

        u = 1;

        if (x === 0) {
            x = y - 2;
        } else {
            x = x - 1;
        }

        $(".overlay").eq(x).fadeIn(750);

        $("#c1").text(x);
        $("#c3").text(u);
    });

Answer 1

This will not work on fiddle because you forgot to include external resurces backstretch.min.js in the fiddle and in your computer where you're running this code is working because you have included that library.

so including external resource will make your fiddle work.

As you said previous button is misbehaving, for that you might have to add resources to fiddle and post it again! But i suggest you to add resources to the fiddle and check it should work!