Transition between divs in an infinite loop using Javascript

While updating the code for flexslider on Styloot (http://styloot.com), i wanted to combine three slides into one & have them run in a loop.

For this i gave the three divs i wanted to transition between a class called 'createSlide'. The html code for these three divs:

<li>
    <div class="createSlide">
        <img src="PATH" alt="StyleFinder" />
        <div class="createCircle">
            <h1>Style<br />Finder</h1>
        <h2>Got an idea? Create it.</h2>
        <h2>Search it. Shop it.</h2>
        <a href="LINK" class="button">Get started &gt;</a>
        </div>
    </div>

    <div class="createSlide">
        <img src="PATH" alt="StyleFinder" />
        <div class="createCircle">
            <h1>Style<br />Finder</h1>
        <h2>Got an idea? Create it.</h2>
        <h2>Search it. Shop it.</h2>
        <a href="LINK" class="button">Get started &gt;</a>
        </div>
    </div>

    <div class="createSlide">
        <img src="PATH" alt="StyleFinder" />
        <div class="createCircle">
            <h1>Style<br />Finder</h1>
        <h2>Got an idea? Create it.</h2>
        <h2>Search it. Shop it.</h2>
        <a href="LINK" class="button">Get started &gt;</a>
        </div>
     </div>
</li>

And the javascript code that did the magic :

$(window).load(function() {
    var slideAnimator = { 
        init: function() {
    var slideDelay = 2900;
    var slideCount= $('.createSlide').length;
    var currentSlide= 0;
    $('.createSlide').eq(0).show();

    //Creating Loop
    var slideLoop = setInterval(function(){
        $('.createSlide').eq(currentSlide).delay(200).hide();
        if(currentSlide== slideCount-1){
            currentSlide= 0;
        }else{
            currentSlide++;
        }
    $('.createSlide').eq(currentSlide).show();
    }, slideDelay);
    }
};
slideAnimator.init();
});