JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<div class="group-fcallout-a field-group-div rotating-item">
  <div class="field field-name-field-frontpage-callout-title field-type-text field-label-hidden">
    <div class="field-items">
      <div class="field-item even">AAAAAA</div>
    </div>
  </div>
  <div class="field field-name-field-frontpage-callout-sub-titl field-type-text field-label-hidden">
    <div class="field-items">
      <div class="field-item even">Google?</div>
    </div>
  </div>
  <div class="field field-name-field-frontpage-callout-link2 field-type-link-field field-label-hidden">
    <div class="field-items">
      <div class="field-item even"><a class="front_callout_linker" data-parent="" href="http://www.google.com"><strong>Click here</strong> for more details</a></div>
    </div>
  </div>
  <div class="field field-name-field-frontpage-callout-image field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even"><img typeof="foaf:Image" src="http://1.bp.blogspot.com/-HIOw6QDrh1U/ThaZaF42DTI/AAAAAAAAABQ/-djsId6jK2k/s320/scottish-fold-cat-wallpaper-picture-9.jpg" width="489" height="326" alt="Universal credit" title="Universal credit"></div>
    </div>
  </div>
  <div class="color_fader_frontpage" style="opacity: 0;"></div>
</div>

<div class="group-fcallout-b field-group-div rotating-item">
  <div class="field field-name-field-frontpage-callout-title2 field-type-text field-label-hidden">
    <div class="field-items">
      <div class="field-item even">BBBBBBBBB</div>
    </div>
  </div>
  <div class="field field-name-field-frontpage-callout-sub2 field-type-text field-label-hidden">
    <div class="field-items">
      <div class="field-item even">Bing?</div>
    </div>
  </div>
  <div class="field field-name-field-frontpage-callout-link2 field-type-link-field field-label-hidden">
    <div class="field-items">
      <div class="field-item even"><a class="front_callout_linker" data-parent="" href="http://www.bing.com"><strong>Click here</strong> for...

CSS

.group-fcallout-a,
.group-fcallout-b {
  position: absolute;
}

.group-fcallout-a {
  z-index: 1;
}

.group-fcallout-b {
  z-index: 2;
}

.group-fcallout-a .field-name-field-frontpage-callout-title,
.group-fcallout-b .field-name-field-frontpage-callout-title2 {
  position: absolute;
  left: 20px;
  top: 150px;
  font-family: 'fira_sansextrabold';
  font-size: 35px;
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0px 16px;
}

.group-fcallout-a .field-name-field-frontpage-callout-sub-titl,
.group-fcallout-b .field-name-field-frontpage-callout-sub2 {
  position: absolute;
  left: 29px;
  top: 206px;
  font-family: 'fira_sanslight';
  font-size: 35px;
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0px 16px 0px 12px;
}

.group-fcallout-a .field-name-field-frontpage-callout-link2,
.group-fcallout-b .field-name-field-frontpage-callout-link2 {
  position: absolute;
  left: 20px;
  top: 275px;
  font-family: 'fira_sanslight';
  font-size: 14px;
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 7px 10px;
}

JavaScript

$(document).ready(function() {
	
	InfiniteRotator();

});

function InfiniteRotator() {
			var flag = 1;
  
			var fadeOut = function() {
        $('.group-fcallout-b').fadeOut(500);
        flag = 0;
      }

			var fadeIn = function() {
        $('.group-fcallout-b').fadeIn(500);
        flag = 1;
      }
      
      var timer = setInterval(function(){
      	if(flag)
        	fadeOut();
        else
          fadeIn();
      }, 5000);
}