JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<div class="imageContainer"></div>
<div class="imageContainer"></div>
<div class="imageContainer"></div>
<div class="imageContainer"></div>

CSS

.imageContainer {
    width: 200px;
    height: 200px;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
}

JavaScript

var myImages = new Array("350/150", "300/250", "250/450", "150/150", "350/500");
    
 
    $(document).ready(function() {
    
        var random = myImages[Math.floor(Math.random() * myImages.length)];
        random = 'url(https://placekitten.com/g/' + random + ')';
        $('.imageContainer').css('background-image', random);

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

    function SetImage() {
    
    		var len = $(".imageContainer").length;
        var randomi = Math.floor( Math.random() * len ) + 1;
        $(".imageContainer").eq(random).css('border', '1px solid red');
    
        var random = myImages[Math.floor( Math.random() * len ) + 1 * myImages.length];

        random = 'url(https://placekitten.com/g/' + random + ')';
        $('.imageContainer').fadeOut(500);

        setTimeout(function () {
            $('.imageContainer').css('background-image', random);
            $('.imageContainer').fadeIn(500);
        }, 500);
    }