Make "backstretch" slideshow display images randomly

**KennyP** · 11-08-2019, 08:19 AM

Hi:

The following "backstretch" script works well as a rotating slideshow with captions.

Can you please tell me what needs to be added to the script so that all images will display randomly?

Thanks

Code:

jQuery(document).ready(function($){
	
		var items = [

            { img: "images/backgrounds/karloff-frankenstein.jpg", caption: "Boris Karloff"},
			
	    { img: "images/backgrounds/lon-chaney.jpg", caption: "Lon Chaney"},
			
	    { img: "images/backgrounds/karloff-mummy.jpg", caption: "Boris Karloff"},
			
	    { img: "images/backgrounds/bride-of-frankenstein.jpg", caption: "Elsa Lanchester and Boris Karloff"},
			
	    { img: "images/backgrounds/bela-lugosi.jpg", caption: "Bela Lugosi"},
			
	    { img: "images/backgrounds/orlok-in-bremen.jpg", caption: "Max Schreck"}
			
        ];
		
        var options = {
            fade: 2000,
            duration: 6000
        };

        var images = $.map(items, function(i) { return i.img; });
        var slideshow = $.backstretch(images,options);

        $(window).on("backstretch.show", function(e, instance) {
            var theCaption = items[instance.index].caption;
            var theLink = items[instance.index].link;
            if (theLink) {
            	$(".backstretch-caption").html('<a href="'+theLink+'">'+theCaption+'</a>').show().addClass('animated fadeInUp');
            } else {
            	$(".backstretch-caption").text(theCaption).show().addClass('animated fadeInUp');
            }
        });
        $(window).on("backstretch.before", function(e, instance) {
        	$(".backstretch-caption").hide();
        });
});