JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<div id="pagesSlider">
    <img id="foregroundImage" class="slide" />
    <img id="backgroundImage" class="slide" />
</div>

CSS

#pagesSlider { position: relative; max-width: 100%; width: 640px; }

.slide { 
    position: absolute;
    max-width: 100%;
}

#foregroundImage { z-index: 2; }
#backgroundImage { z-index: 1; }

JavaScript

var images = [
"http://lorempixel.com/output/abstract-q-c-640-480-5.jpg",
"http://lorempixel.com/output/abstract-q-c-640-480-8.jpg",
"http://lorempixel.com/output/abstract-q-c-640-480-10.jpg",
"http://lorempixel.com/output/abstract-q-c-640-480-3.jpg",
"http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"];

var Cycle = function(options) {
    this.images = options.images;    
    this.durationOfSlide = options.durationOfSlide || 5000;
    this.animationSpeed = options.animationSpeed || "slow";
    
    this.counter = 0;
    
    this.slider = document.getElementById("pagesSlider");
    this.background = document.getElementById("backgroundImage");
    this.foreground = document.getElementById("foregroundImage");
    
    this.start();
    
    $(window).on("resize", $.proxy(this.adjustHeight, this));
};

Cycle.prototype.adjustHeight = function() {
    console.log(this.background.height);
    this.slider.style.height = this.background.height;
};

Cycle.prototype.start = function() {
    var self = this;
    
    this.cycle();
    
    this.timer = setInterval(function() {
        self.next();
    }, this.durationOfSlide);
};

Cycle.prototype.hasNextSlide = function() {
    return this.counter + 1 === images.length;
};

Cycle.prototype.next = function() {
    this.counter = this.hasNextSlide() ? 0 : this.counter + 1;
    
    this.cycle();
};

Cycle.prototype.cycle = function() {
    var self = this;
        firstImage = this.images[this.counter],
        nextImage = this.images[this.hasNextSlide() ? 0 : this.counter + 1];
    
    $(this.foreground).fadeOut(this.animationSpeed, function() {
        self.foreground.src = firstImage;
        self.background.src = nextImage;
        
        $(this).show();
    });
};

var cycle = new Cycle({
    images: images,
    durationOfSlide: 5000,
    animationSpeed: "slow"
});