JSFiddle - React, Tailwind, and code Playground

by creativecouple

HTML

<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.min.js"></script>
<div id="banners">
   <div style="background:yellow">
      <p>Some banner text?<br />
        <span>some more text here</span>
      </p>
   </div>

   <div style="background:orange">
      <p>Some other cool stuff?<br />
          <span>this is other text</span>
      </p>
   </div>

   <div style="background:lime">
      <p>Even different text<br />
          <span>this is new text</span>
      </p>
   </div>
</div>

CSS

#banners > * {
    position:absolute;
    height:200px;
    width: 100%;
}

JavaScript

$.fn.random = function() {
    return this.eq(Math.floor(Math.random() * this.length))
};

$(function() {
    $('#banners>*').hide().repeat(5000,true)
        .fadeOut(1000).siblings().random().fadeIn(1000)
    .until($);
});