Slideshow Demo with all options

This is the chance for you to try and see all the options in action in an interactive slideshow.

Center horizontally:
Center vertically:
Stretch Mode: Crop Adapt Fit

    // Image list
    var images = [
        "chocolate-cups-landscape.jpg",
        "chocolate-cups-portrait.jpg",
        "chocolate-tart-landscape.jpg",
        "chocolate-tart-portrait.jpg",
        "tapioca-cake-landscape.jpg"
    ];

    // The index variable will keep track of which image is currently showing
    var index = 0;

    // Call backstretch for the first time with some options,
    // Transition speed of 1secs between images.
    // stretchMode 'adapt' will not stretch pictures in mode portrait
    $.backstretch(images[index], {speed: 1000, stretchMode: "crop"});

    // Define the nextSlide function that launch itself every 5 secs
    // Note : We do not redefine any options here,
    // so they will remain the same as defined by the first call
    function nextSlide() {
        index = (index >= images.length - 1) ? 0 : index + 1;
        var options = { // take the values of our form
            centeredX: ($("#centeredX")[0].checked),
            centeredY: ($("#centeredY")[0].checked),
            stretchMode : $("#stretchMode").val()
        }
        console.dir(options);
        $.backstretch(images[index], options, function whenDone() {
            setTimeout(nextSlide, 5000);
        });
    }

   nextSlide();