JSFiddle - React, Tailwind, and code Playground

HTML

<img src="" alt="" id="image">

CSS

#image{
    width:250px;
    height:250px;
}

JavaScript

var pictures = ["http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.jpg","http://static.ddmcdn.com/gif/ice-ice-babies-pictures-2.jpg"];
var N = pictures.length;
var i = 0;
document.getElementById('image').src=pictures[i];
//fade in function
function fadeIn(el) {
  el.style.opacity = 0;


  var tick = function() {
    el.style.opacity = +el.style.opacity + 0.01;


    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };

  tick();
}
//slider function
function slider(){
     i = (i+1) % N;
     document.getElementById('image').src=pictures[i];
     fadeIn(document.getElementById('image'));
}

window.load = setInterval(slider,3000);