JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://creativecouple.github.com/jquery-timing/jquery-timing.min.js"></script>
<div id="slider">
    <div id="sliderContent">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>    
    </div>
</div>

CSS

#slider
{
    float:left;
    width:100%;
}

#sliderContent
{
    background-color:#eee;
    float:left;
    width:100%;
}

.slide
{
    display:none;
}

JavaScript

var Slider = function() {
    this.initialize();
};

Slider.prototype.initialize = function(){};

Slider.prototype.rotateSlides = function(){
    
    function noHover() {
        return this.is(':hover') ? this.wait('mouseleave') : this ;
    }

    $('.slide').hide().repeat().each($).fadeIn($).wait(1000, function(){
        var idx = $(this).index();  // here you go!
        $('body').append(idx); //here i need access to index number of element
    }).wait(noHover).fadeOut($);
};
    
var s = new Slider();
s.rotateSlides();