JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row main_r max_width_960">
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 main_right ">
		<div class="gallery" id="gallery">
			<img class="img-responsive box" src="images/bg_gallery.png" alt="" />
			
			<img class="img-responsive next" id="carouselNext" src="http://prozaik.16mb.com/misc/carousel_gallery/gallery_next.png" alt="" />	
			
			<div class="carousel_gallery" id="carousel_gallery"></div>
			
			<div class="carousel_gallery_hide" id="carousel_gallery_hide">
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img1.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img2.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img3.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img4.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img5.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img6.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img7.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img8.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img9.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img10.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img11.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img12.png" alt="" /></span>								
				<span class="a"><img src="http://prozaik.16mb.com/misc/carousel_gallery/img13.png" alt="" /></span>								
				<span class="a"><img...

CSS

.gallery{
	height: 720px;
	overflow: hidden;
	position: relative;
	
	text-align: center;
}

	.gallery .a{
		display: none;
		position: absolute;

	}
	
	.gallery .a.pic1{
		top: 300px;
		left: 0px;	
	}
	
	.gallery .a.pic2{
		top: 150px;
		left: 100px;	
	}	
	
	.gallery .a.pic3{
		top: 150px;
		right: 100px;	
	}
	
	.gallery .a.pic4{
		top: 300px;
		right: 0px;	
	}		

	.gallery .box{
		display: inline-block;
		padding-top: 200px;
	}

	.gallery .next{
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -65px;
		margin-top: 27px;
		cursor: pointer;
		z-index: 400;
	}
	
	.gallery .carousel_gallery{
		width: 360px;
		height: 280px;
		position: absolute;
		top: 0px;
		left: 50%;
		margin-left: -185px;
		overflow: hidden;
	}
		
		.gallery .carousel_gallery .a[data-main='true']{
			display: inline-block;
			position: absolute;
			top: 200px;
			left: 99px;
			cursor: pointer;
			opacity: 0;
		}
		
			.gallery .carousel_gallery .a[data-main='true'] img{
				display: block;
			}
	
	.gallery .carousel_gallery_hide{
		display: none;
		width: 360px;
		height: 280px;
		position: absolute;
		top: 300px;
		left: 50%;			
	}
	
		.gallery .carousel_gallery_hide .a{
			display: inline-block;


		}
		
			.gallery .carousel_gallery_hide .a img{
				display: block;
			}

JavaScript

var kalininCarouselGallery = new kalininCarouselGallery({
				tabContainer: $('#gallery')
			});	

// ---------------------------------------------------------------------------------------------- WIDJET kalininCarouselGallery IMPLEMENTATION------------
function kalininCarouselGallery(options) {
	// ------------------------------------------------------------------------------------------ properties ----------	
	var self = this;
	
	var hideColl = $('#carousel_gallery_hide .a'),
		mainColl,
		arrMain = new Array(),
		indexMain,
		hideElements = $('#carousel_gallery_hide .a');
	
	var	old_main_elem,
		old_main_num;		
	
	init();
	
	// ------------------------------------------------------------------------------------------ methods ------------		
	function init(){
		hideColl.each(function(index){
			$(this).attr('data-num', index);
		});
		
		mainColl = $('#carousel_gallery_hide .a:nth-child(5n-4)');
		mainColl.each(function(index){
			arrMain[index] = $(this).attr('data-num');
		});
		
		indexMain = arrMain[0]
		
		console.log(arrMain);
		
		hideColl.eq(0).attr('data-main', 'true');
		
		action();
	};
	
	function clearAllElements(){
		hideElements.removeAttr('data-main');
		$('.pic1, .pic2, .pic3, .pic4').remove();
		$('#carousel_gallery .a').remove();
		
		indexMain++;
		
		if(arrMain[indexMain]){
			hideElements.eq(arrMain[indexMain]).attr('data-main', 'true');
		}
		else{
			hideElements.eq(0).attr('data-main', 'true');
			indexMain = 0;
		}
		
	};

	function action(){
		$('#carousel_gallery_hide .a[data-main="true"]').clone().appendTo("#carousel_gallery");
		
		$('#carousel_gallery .a').animate(
			{
				top: "0px",
				opacity: 1
			},
		500, function(){		
			$("#carousel_gallery_hide .a[data-main='true']").next().clone().addClass('pic1').appendTo("#gallery").fadeIn(1000);
			$("#carousel_gallery_hide .a[data-main='true']").next().next().clone().addClass('pic2').appendTo("#gallery").fadeIn(1000);
			$("#carousel_gallery_hide...