JSFiddle - React, Tailwind, and code Playground

by TekVanDo

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<div id="container">
    <div id="strange_slider">
		<div>тест</div>
        <img src="http://3.s3.envato.com/files/18277954/images/triworks_abstract26.jpg">
		<img src="http://img5.joyreactor.cc/pics/post/%D0%B3%D0%B8%D1%84%D0%BA%D0%B8-%D0%BA%D0%BE%D1%82%D1%8D-437705.gif">
		<img src="http://www.1stwebdesigner.com/wp-content/uploads/2010/03/deviantart-groups/aurora-borealis-best-deviantart-groups-you-should-watch.jpg">
		<img src="http://www.profilethai.com/download/original/Stream_of_Light_by__kol.jpg">
	</div>
</div><br><br>
<div id="container2">
    <div id="strange_slider2">
        <img src="http://www.1stwebdesigner.com/wp-content/uploads/2010/03/deviantart-groups/aurora-borealis-best-deviantart-groups-you-should-watch.jpg">
		<img src="http://www.profilethai.com/download/original/Stream_of_Light_by__kol.jpg">
		<img src="http://3.s3.envato.com/files/18277954/images/triworks_abstract26.jpg">
		
		
	</div>
</div><br><br>
<div id="container3">
    <div id="strange_slider3">
        <img src="http://www.1stwebdesigner.com/wp-content/uploads/2010/03/deviantart-groups/aurora-borealis-best-deviantart-groups-you-should-watch.jpg">
		<img src="http://www.1stwebdesigner.com/wp-content/uploads/2010/03/deviantart-groups/aurora-borealis-best-deviantart-groups-you-should-watch.jpg">
	</div>
</div><br><br>
<div id="container4">
    <div id="strange_slider4">
		<div>тест</div>
        <img src="http://3.s3.envato.com/files/18277954/images/triworks_abstract26.jpg">
		<img src="http://www.1stwebdesigner.com/wp-content/uploads/2010/03/deviantart-groups/aurora-borealis-best-deviantart-groups-you-should-watch.jpg">
	</div>
</div>

CSS

#container ,#container2,#container3,#container4{
    background:grey;
    width:100%;
    height:300px;
    position:relative;    
}
#strange_slider ,#strange_slider2,#strange_slider3,#strange_slider4{
    width:500px;  
    height:250px;
}
#strange_slider img ,#strange_slider2 img,#strange_slider3 img,#strange_slider4 img{
    display: none;
}
.move_block{
    background:red;
}
.strange_navigation, .strange_navigation2, .strange_navigation3, .strange_navigation3{
    position:relative;
    top:10px;
    height:20px;
    width: 30px;
    margin-left:5px;
    background:red;
    z-index:5000;
    float:left;
}

JavaScript

var slider = 0;
(function($) {
jQuery.fn.strange_slider = function(options) {
      var settings = $.extend( {
      'parts_row'       : 10,
      'parts_columns'   : 10,
      'animation_speed' : 500,
      'img_now'         : 0,
      'split_distance'  : 5,
      'mode'            : "hover",
      'effect'          : "gather",
      'slide_effect'    : false,
      'revers'          : false,
      'object'          : this,
      'auto_slide'      : true,
      'slide_speed'     : 3000,
	  'animation_del'	: 300,
	  'sequence'		: "left_to_right"
      }, options);
	slider++;
    var object          = this; //обьект слайдера
    var img_count       = $(this).find("img").size(); //количество изображений
    var area_width      = $(this).width(); //ширина слайдера
    var area_height     = $(this).height(); //высота слайдера
    var block_width     = Math.round($(this).width()/settings.parts_columns); //ширена блока
    var block_height    = Math.round($(this).height()/settings.parts_row); // высота блока
    var img_src         = $(this).find("img").eq(settings.img_now).attr("src"); //адрес изображания
	var block_del 		= settings.animation_del / (settings.parts_columns + settings.parts_row);
	var autoslide = 0; 
    
    function set_params(object1){    
        object          = object1;
        img_count       = object.find("img").size();
        area_width      = object.width();
        area_height     = object.height();
        block_width     = Math.round(object.width()/settings.parts_columns);
        block_height    = Math.round(object.height()/settings.parts_row);
        img_src         = object.find("img").eq(settings.img_now).attr("src");
        block_pos_l     = 0;
        block_pos_t     = 0;
    }
    
    //Создание начальной сетки
    function create_greed(object){
	   block_pos_l     = 0; 
	   block_pos_t     = 0;
       counter		   = 1;
       for (i=0;i<settings.parts_row;i++){              
        for (j=0;j<settings.parts_columns;j++){
      ...