JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="slideshow">
    <div id="slideshow-wrapper">
        <div class="slide one">One</div>
        <div class="slide two">Two</div>
        <div class="slide three">Three</div>
        <div class="slide four">Four</div>
        <div class="slide five">Five</div>
</div>
</div>
<div id="watch"></div>

CSS

#slideshow {
    width: 500px;
    height: 300px;
    margin: 2em auto;
    position: relative;
    overflow: hidden;
    border: 0.5em double #aaa;
}

#slideshow-wrapper {
    width: 2500px;
    height: 300px;
    position: relative;
    background: #222;
}

div.slide {
    float: left;
    width: 500px;
    height: 300px;
    background: #ccc;
    text-align: center;
    font-size: 1.5em;
    line-height: 300px;
}

div.two, div.four {background: #ffc;}

div[rel="visible"] {
    font-size: 5em;
}

JavaScript

var Slideshow = new function() {
    
    var slideshow = document.getElementById('slideshow'),
        wrapper = $('#slideshow-wrapper', slideshow),
        slides = $('div.slide', wrapper),
        index = 0,
        timer = null;

var slideTo = function(element) {
    
    wrapper.animate({
        left: - element.position().left
    }, 2000);
    
};

var watch = function(element) {
    
   element.attr('rel', 'visible').siblings().removeAttr('rel');
  
   $('#watch').text(element.text() + ' is ' + element.attr('rel'));    
    
};

var autoSlide = function() {
    
    timer = setInterval(function() {

        index++;
        
        if(index == slides.length) {
         
              index = 0;            
            
        }
        
        var slide = slides.eq(index);
        
        slideTo(slide);
        watch(slide);

    }, 2000);        
    
};

this.init = function() {
    
  autoSlide();  
    
};
    
}();


$(function() {
    
    Slideshow.init();
    
});