JSFiddle - React, Tailwind, and code Playground

by Ahmad Najiullah

HTML

<div id="slider-rotator" class="slider-rotator loading"></div>
<div id="slider-rotator2" class="slider-rotator loading"></div>

CSS

.slider-rotator{width:auto;height:80px;border:1px solid #ccc;background-color:white;padding:10px;font:normal normal 11px/1.4 Tahoma,Verdana,Arial,Sans-Serif;color:#333;margin:0...

JavaScript

makeSlider({
    url: "http://www.kotaserang.com", // Your blog URL
    showThumb: false, // Hide the thumbnails
    showNav: false, // Hide the navigation
    summaryLength: 160 // Increase post summary length to `160`
});


(function($) {
	$.fn.customRotator = function(o) {

		o = $.extend({
			interval: 1000,
			speed: 100,
			hoverPause: true,
			autoHeight: false,
			crossFade: false,
			autoSlide: true,
			hide: function(index) {},
			show: function(index) {}
		}, o);
		
		var done = true;

		return this.each(function() {
			var $this = $(this),
			$item = $this.children().hide(),
			$nav = $this.next(),
			slideshow = null,
			over = 0,
			i = 0;
			function rotateSlide() {
				o.hide(i);
				$nav.find('.current').removeClass('current');
				done = false;
				if ($item.eq(i).next().length) {
					if (!o.crossFade) {
						$item.eq(i).fadeOut(o.speed, function() {
							$(this).next().fadeIn(o.speed, function() {
								o.show(i);
								done = true;
							});
							if (o.autoHeight) {
								$this.stop().animate({
									height: $item.eq(i + 1).height()
								}, o.speed/2);
							}
							i++;
						});
					} else {
						$item.eq(i).fadeOut(o.speed);
						$item.eq(i).next().fadeIn(o.speed, function() {
							o.show(i);
							done = true;
							i++;
						});
						if (o.autoHeight) {
							$this.stop().animate({
								height: $item.eq(i + 1).height()
							}, o.speed/2);
						}
					}
					$nav.find('.rotator-num a').eq(i + 1).addClass('current');
				} else {
					if (!o.crossFade) {
						$item.eq(i).fadeOut(o.speed, function() {
							i = 0;
							$item.first().fadeIn(o.speed, function() {
								o.show(i);
								done = true;
							});
							if (o.autoHeight) {
								$this.stop().animate({
									height: $item.eq(i).height()
								}, o.speed/2);
							}
						});
					} else {
						$item.eq(i).fadeOut(o.speed);
						$item.first().fadeIn(o.speed, function() {
							o.show(0);
							done = true;
							i =...