JSFiddle - React, Tailwind, and code Playground

HTML

<figure class="MiniModImgSlider">
      <img src="img01.jpg" alt="img01">
      <img src="img02.jpg" alt="img02">
      <img src="img03.jpg" alt="img03">
      <img src="img04.jpg" alt="img04">
      <img src="img05.jpg" alt="img05">
    </figure>

CSS

.MiniModImgSlider
      {
        background-color: #ccc;
        background-size: 100%;
        background-position: center;
        height: 300px;
        margin: 30px;
        max-width: 100%;
        position: relative;
      }

      .MiniModImgSlider img
      {
        display: none;
        max-width: 100%;
        position: absolute;
      }

JavaScript

var imgs = $(".MiniModImgSlider img").map(function() 
        {
          return $(this).attr('src');
        });

        for (var i = 0; i <= imgs.length; i++) 
        {
          setInterval(function()
          {
           $(".MiniModImgSlider").css('background-image', 'url('+imgs[i]+')');
          },1000);

        };