JSFiddle - React, Tailwind, and code Playground

by michaelynch

HTML

<div class="banner"></div>

CSS

.banner {
	background-image: url('http://images4.fanpop.com/image/photos/21900000/Jean-Luc-Picard-jean-luc-picard-21977752-694-530.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #000;
	min-height: 300px;
}

JavaScript

;(function($) {

    $.fn.gallery = function(options) {
    
    	// return if no element was bound
		// so chained events can continue
		if(!this.length) { 
			return this; 
		}

		// define default parameters
        var defaults = {
            images: [],
            imgInterval: 6000,
            fadeInterval: 2000,
            error: function(message) {},
            success: function() {}
        }

        // define settings
        this.settings = {};
 
        // merge defaults and options
        this.settings = $.extend({}, defaults, options);
        
        // namespace settings
        var s = this.settings,
        	el = $(this),
        	i = 1;
        	
        function startGallery() {
        
	        // set default styles and first image
	        el.css({
		        'background-image': 'url('+s.images[0]+')',
		        'background-size': 'cover',
		        'background-repeat': 'no-repeat',
		        'transition': 'background-image ' + (Math.round(s.fadeInterval / 1000)) + 's'
	        });
	        
	        // set time interval
	        setInterval(function() {
	        
	        	// update background image
	        	el.css({
				    'background-image': 'url('+s.images[i]+')'
			    });
			    
			    // if on last image
			    if(i == (s.images.length - 1)) {
			    	// reset index
				    i = 0;
			    } else {
			    	// otherwise increment index
				    i++;
			    }
	        	
	        }, s.imgInterval);
        
        }
        
        function preloadImages(images, callback) {
        
        	// preload images	
	        for(var y = 0; y < images.length; y++) {
		        
		        var img = new Image();
		        
		        console.log(s.images[y]);
		        
		        img.src = s.images[y];
	        }
	        
	        callback();
	        
        }
        
        preloadImages(s.images, function() {
        
        	console.log('Imags have been preloaded.');
        
        	startGallery();
	        
        });

    }
 ...