JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div id="slider">
    <img src="http://itunewplymouthtriathlon.co.nz/wp-content/themes/twentythirteen/images/itu-header.jpg" />
     <img src="http://itunewplymouthtriathlon.co.nz/wp-content/themes/twentythirteen/images/itu-header.jpg" />
    
</div>

<div class="site-rotater-background">
        
        <h2>21 MARCH 2014</h2>
        <h3>ENTER NOW</h3>
        
        As one of the fastest-growing sports in the world, triathlon delivers a culture of strength and influence. Triathlon, in many respects, is more than a sport. It is a powerful symbol of a pursuit of health and an active lifestyle. 

        
        <div style="background-color: #3e9cd7; text-align: center; padding:15px;width:100%; font-size:15px;margin-top:30px;">Click here to Read More</div>
        
        </div>

CSS

.site-rotater-background {
    background-color: rgba(43, 43, 43, 0.8);
	width:300px;
	height: 395px;
	padding-top:40px;
	padding-left:20px;
	padding-right:20px;
	color: #fff;
	font-size:13px;
	margin-top:-395px;
	z-index:999999;
    position:absolute;
}

#slider { 
	width: 964px;
	height: 395px;

}

.rotator .item {
  display:block;
  position:absolute;
}

.rotator {
  position:relative;
  margin:0px auto;
}

JavaScript

(function($) {
    $.fn.rotator = function(settings) {
        settings = jQuery.extend({
            interval: 5000,
            speed: 1000
        }, settings);
 
        return this.each(function() {
            var $t = $(this),
                $item = $t.children().addClass('item').hide();
 
            $t.addClass('rotator');
 
            if ($item.length > 1) {
                $item.first().addClass('current').fadeIn(settings.speed);
                setInterval(function() {
                    var c = $t.find('.current');
                    if (c.next().length === 0) {
                        c.removeClass('current').fadeOut(settings.speed);
                        $item.first().addClass('current').fadeIn(settings.speed);
                    } else {
                        c.removeClass('current').fadeOut(settings.speed).next().addClass('current').fadeIn(settings.speed);
                    }
                }, settings.interval);
            }
        });
    };
})(jQuery);
 
// Execute here!
$(function() {
    $('#slider').rotator();
});