JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="ru-RU">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="ru-RU">
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html lang="ru-RU">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<title></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://berezovsky.org.ua/wptvk/xmlrpc.php" />

<link rel="stylesheet" type="text/css" media="all" href="http://berezovsky.org.ua/wptvk/wp-content/themes/business/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="#"/>
<!-- jquery -->	

 <script src="http://berezovsky.org.ua/wptvk/wp-content/themes/business/js/jquery-1.9.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://berezovsky.org.ua/wptvk/wp-content/themes/business/slider/widget/css/rcarousel.css" />
<link type="text/css" rel="stylesheet" href="http://berezovsky.org.ua/wptvk/wp-content/themes/business/slider/widget/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link type="text/css" rel="stylesheet" href="http://berezovsky.org.ua/wptvk/wp-content/themes/business/slider/widget/css/lightbox.min.css" />

<script type="text/javascript" src="http://berezovsky.org.ua/wptvk/wp-content/themes/business/slider/widget/lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://berezovsky.org.ua/wptvk/wp-content/themes/business/slider/widget/lib/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="http://berezovsky.org.ua/wptvk/wp-content/themes/business/slider/widget/lib/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="http://berezovsky.org.ua/wptvk/wp-content/themes/business/slider/widget/lib/jquery.ui.rcarousel.min.js"></script>
<script type="text/javascript" src="http://berezovsky.org.ua/wptvk/wp-content/themes/business/slider/widget/lib/jquery.ui.rlightbox.min.js"></script>

<link rel='stylesheet' id='jquery.fancybox-css' ...

CSS

#button{
    position: absolute;
    top: 0px;
    
}
.aaa{
    width: 11111px;
    position: relative;
    left: 0px;
    top: 0px;
    overflow: none;
}

JavaScript

var aaa = jQuery("#carousel_home").html(),
    timeSpeed=5000,
    myTimerSlider,
    speed=1000;
var myCarouselLength = jQuery("#carousel_home>a").length-1;

jQuery("#carousel_home").html("<div class='aaa'>"+aaa+"</div>");
jQuery(".aaa").addClass("Slidefault")
jQuery("#ui-carousel-prev").click(function(){
		if(jQuery(".aaa").hasClass("Slidefault")){
			GetMySlider();

			
		}
		
	})

function GetMySlider(){
		jQuery(".aaa").removeClass("Slidefault");
 jQuery(".aaa").animate({left:"-920px"},speed,function(){
		
		jQuery(".aaa>a:eq(0),.aaa>a:eq(1),.aaa>a:eq(2)").insertAfter(jQuery(".aaa>a:eq("+myCarouselLength+")"));
		jQuery(this).css({"left":"0px"});
		jQuery(".aaa").addClass("Slidefault");
		
		});
}

jQuery("#ui-carousel-next").click(function(){
		if(jQuery(".aaa").hasClass("Slidefault")){
            jQuery(".aaa").removeClass("Slidefault");

		jQuery(".aaa").css({"left":"-920px"});
        jQuery(".aaa>a:eq("+myCarouselLength+")").insertBefore(".aaa>a:eq(0)");
        jQuery(".aaa>a:eq("+myCarouselLength+")").insertBefore(".aaa>a:eq(0)");
        jQuery(".aaa>a:eq("+myCarouselLength+")").insertBefore(".aaa>a:eq(0)");
             jQuery(".aaa").animate({left:"0px"},speed,function(){
		jQuery(".aaa").addClass("Slidefault");
		
		});
			
		}
		
	})