JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="imageContainer one"></div>
<div class="imageContainer two"></div>
<div class="imageContainer three"></div>
<div class="imageContainer four"></div>

CSS

.imageContainer {
    width: 200px;
    height: 200px;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
}
.one { 
  background-image: url(https://placekitten.com/g/350/150); 
}
.two { 
  background-image: url(https://placekitten.com/g/300/550); 
}
.three { 
  background-image: url(https://placekitten.com/g/400/200); 
}
.four { 
  background-image: url(https://placekitten.com/g/350/750); 
}

JavaScript

var myImages = new Array("350/150", "250/450", "150/150", "350/500", "200/600", "550/250", "300/550", "400/200", "350/750");

    $(document).ready(function() {

      $(".image-container").each(function() {
        var prevImage = $(this).css("background-image");
        var n = prevImage.lastIndexOf("/");
        var prevName = prevImage.substring(n - 3, n + 4);
        myImages = jQuery.grep(myImages, function(value) {
          return value != prevName;
        });
      });

      setInterval(function() {
        SetImage();
      }, 3000);
    });

    function SetImage() {
      var rando = myImages[Math.floor(Math.rando() * myImages.length)];

      var rand = Math.floor(Math.rando() * 4);
      if (rand <= 2 && rand == $('imageContainer:eq(0)').attr("data-changed")) {
        rand = rand + 1;
      } else if (rand == 2 && rand == $('imageContainer:eq(0)').attr("data-changed")) {
        rand = rand - 1;
      }

      var randomImage = 'url(https://placekitten.com/g/' + rando + ')';
      var prevImage = $('.imageContainer:eq(' + rand + ')').css("background-image");
      var n = prevImage.lastIndexOf("/");
      var prevName = prevImage.substring(n - 3, n + 4);
      var seen = 0;
      $(".imageContainer").each(function() {
        if ($(this).css("background-image") == prevName) {
          seen = 1;
        }
      });
      if (seen == 0) {
        myImages.push(prevName);
      }

      myImages = jQuery.grep(myImages, function(value) {
        return value != rando;
      });
      $('.imageContainer:eq(' + rand + ')').fadeOut(600);

      setTimeout(function() {
        $('.imageContainer:eq(' + rand + ')').css('background-image', randomImage);
        $('.imageContainer:eq(' + rand + ')').fadeIn(600);
      }, 500);
      $('imageContainer:eq(0)').attr("data-changed", rand);
    }