JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<!-- <img src="https://media.expedia.com/hotels/5000000/4580000/4574000/4573993/4573993_23_b.jpg" id="mainImage" alt="Looking out at the Pacific" width="350" height="315" class="articleImage" /> -->

<div id="mainImage" alt="Looking out at the Pacific" class="articleImage js-fade fade-in is-paused"></div>
<div id="mainImage2" class="articleImage1"></div>

CSS

.articleImage {
  height: 315px;
  width: 350px;
  background-repeat: no-repeat;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
.articleImage1 {
  height: 315px;
  width: 350px;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  background: linear-gradient(red, yellow);
}

JavaScript

var myImage = document.getElementById("mainImage");
var imageArray = [
  "https://media.expedia.com/hotels/5000000/4580000/4574000/4573993/4573993_23_b.jpg",
  "https://media.expedia.com/hotels/3000000/2790000/2781600/2781573/2781573_41_b.jpg",
  "https://media.expedia.com/hotels/1000000/60000/58400/58316/58316_467_b.jpg",
  "https://media.expedia.com/hotels/1000000/540000/533500/533436/533436_415_b.jpg",
  "https://media.expedia.com/hotels/6000000/5540000/5532900/5532837/5532837_46_b.jpg",
  "https://media.expedia.com/hotels/4000000/3820000/3814100/3814029/3814029_88_b.jpg"
];
var i = 0;

function changeImage() {

  var image = 'url(' + imageArray[i] + ')';
  $('#mainImage').fadeOut(500, function() {
    $(this).css('background', image).fadeIn(1000);
  });
  $('#mainImage2').fadeOut(2000, function() {
    $(this).css('background', image).fadeIn(500);
  });
  i++;
  if (i >= imageArray.length) {
    i = 0;
  }
}
var intervalHandle = setInterval(changeImage, 5000);