JSFiddle - React, Tailwind, and code Playground

by ecropolis

HTML

<div title="Welcome" class="relationship-block--pane image" style="background-image: url(https://s3.amazonaws.com/mentoring.redesign/s3fs-public/group%20of%20clients.jpg)"></div>

CSS

.relationship-block--pane.image {
   width: 600px;
   height:400px;
   background-size: 100%;
}

JavaScript

/* drop into a wysiwyg content band - doesn't work in the hero block b/c of char count limits */
var rotator = {config:{
     seconds:5
},images:[       
       'https://s3.amazonaws.com/mentoring.redesign/s3fs-public/shutterstock_140889715%281%29.jpg',
       'https://s3.amazonaws.com/mentoring.redesign/s3fs-public/604021580_0.jpg',
       'https://s3.amazonaws.com/mentoring.redesign/s3fs-public/GettyImages-169949326-downsized_5.jpg',
       'https://s3.amazonaws.com/mentoring.redesign/s3fs-public/group%20of%20clients.jpg'
   ]
};

//cache images               
rotator.images.forEach( function(path) { new Image().src=path } );               
rotator.elem = document.getElementsByClassName("relationship-block--pane image")[0];
rotator.cur = 0;
rotator.interval = setInterval(function(){ rotator.elem.style.backgroundImage = 'url('+rotator.images[rotator.cur]+')'; rotator.cur = (rotator.cur === rotator.images.length-1?0:rotator.cur+1); }, rotator.config.seconds*1000);