JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ut.kafemaya.ru/en/nishtyakGallery/js/jquery.ui.widget.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div class="wrap">
  <div class="slideshow">
    <div class="item">
        <div class="top">First top</div>
        <div class="middle">
          <div class="left">First left</div>
          <div class="right">First right</div>
        </div>
        <div class="bottom">First bottom</div>
        <div class="bottom bottom2">First bottom 2</div>
    </div>
    <div class="item">
        <div class="top">Second top</div>
        <div class="middle">
          <div class="left">Second left</div>
          <div class="right">Second right</div>
        </div>
        <div class="bottom">Second bottom</div>
    </div>
    <div class="item">
        <div class="top">Third top</div>
        <div class="middle">
          <div class="left">Third left</div>
          <div class="right">Third right</div>
        </div>
        <div class="bottom">Third bottom</div>
    </div>
    
    <span class="prev">Prev</span>
    <span class="next">Next</span>
  </div>
</div>

CSS

.wrap {
    height: 200px;
    overflow: hidden;
    width: 100%;
}      
.slideshow {
    padding: 0;
    margin: 0;
    position: relative;    
}
.item {
    display: none;
    position: absolute;
    text-align:center;
    margin: 0;
    padding: 0;
}
.movingInnerItem {    
    position: absolute;
    left: 0;
    top: 0;
}
.top {
    position: relative;
    padding: 10px 0 0 0;
    height: 90px;
    text-align:center;
    border: none;
    margin:auto;
     background: #a88;    
}
.left,.right {
    position: relative;
     padding: 10px 0 0 0;
    height: 40px;
    width: 50%;
    float:left;
    border: none;
     background: #8a8;
}
.right {    
     background: #aaa;
}
.middle{
    border: none;
    width: 100%;
    margin:auto;    
}
.bottom {
    position: relative;
     padding: 10px 0 0 0;
    height: 40px;
    clear:both;
    border: none;
     background: #88a;
}
.bottom2 {    
     background: #aac;
}
.prev, .next{
    position: absolute;
    width: 80px;
    height: 35px;
    padding: 12px 0 0 12px;
    background: #eee;
    border: 1px solid #ccc;
    cursor: pointer;
    top: 75px; 
}
.prev{
    left: 0;    
}
.next{
    right: 0;
}

JavaScript

$(function() {             
             $(".wrap").nishtyakSlider({                
                interval: 2,
                transitions: {3: "lift"}
             });              
}); 




(function( $, undefined ) {

     $.widget("nishtyak.nishtyakSlider", {
         version: "1.0.0",
        
        options: {
            transitions: [],
            interval: 0,
            innerItemDelay: 200,
            animateDuration: 1200,
            easing: 'easeInExpo'
          },    
        _initVars: function() {            
            this.wrapper   = $(this.element); 
            this.slidesWrapper = this.wrapper.find(".slideshow");        
            this.arrowNext = this.wrapper.find(".next"); 
            this.arrowPrev = this.wrapper.find(".prev");                   
                     
            this.viewSize = {
              width:  this.wrapper.width(),
              height: this.wrapper.height(),
            };
            
            this.currentIndex = 0;
            this.count = 0;
            this.items = [];
            this.autoScrolling = this.options.interval != 0;
            this.timer = null;
        },

 
        _init: function() {
            this._initVars();
            this._initItems();
            this.resizeItems();            
            this._render(); 
            this._addEvents();
            this.autoScrollingEnable();                    
        },   
        
        _initItems: function() {
            var self = this;
            
            this.slidesWrapper.find(".item").each(function() {  
                self.count++;  
                
                var i = self.count-1;   
                var innerCount = 0;                 
                var innerItems = [];                       
                
                self.items[i] = {                    
                    container: $(this),   
                    transition: self.options.transitions[i+1] || 'ride'
                };
             ...