JSFiddle - React, Tailwind, and code Playground

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="slideshow">
    <div id="slideshow-wrapper">
        <div class="slide">Slide 1<div class="desc">Descrizione</div></div>
        <div class="slide">Slide 2<div class="desc">Descrizione</div></div>
        <div class="slide">Slide 3<div class="desc">Descrizione</div></div>
    </div>
</div>

CSS

#slideshow {
    width: 400px;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin: 2em auto;
}

#slideshow-wrapper {
    width: 1200px;
    height: 300px;
    position: relative;
    background: #06c;
}

div.slide {
    background: #c60;
    width: 400px;
    height: 300px;
    float: left;
    text-align: center;
    font: 2em Arial, sans-serif;
    color: #fff;
    position: relative;
}

div.desc {
    width: 400px;
    height: 2em;
    line-height: 2;
    text-align: center;
    background: #6c0;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    display: none;
}

JavaScript

var Slider = new function() {
    
    var timer = null,
        index = 0,
        wrapper = $('#slideshow-wrapper'),
        slides = $('div.slide', wrapper);
    
    var slide = function() {
        
        timer = setInterval(function() {
            
            index++;
            
            if(index == slides.length) {
             
                index = 0;
               
                $('div.desc', wrapper).hide(); 
                
            }
            
            $.Deferred(function(def) {
                
                def.pipe(function() {
                  
                    return wrapper.animate({
                        left: - slides.eq(index).position().left
                       
                    }, 1000); 
                    
                }).pipe(function() {
                   
                   return slides.eq(index).
                      find('div.desc').fadeIn(1000); 
                    
                });
                
            }).resolve();
            
        }, 2000);
        
    };
    
    this.init = function() {
        
      slide();  
        
    };
        
    
    
}();
  
  
  $(function() {
   
   Slider.init(); 
    
});