Transição entre divs em um loop infinito usando Javascript

Ao atualizar o código do flexslider no Styloot ( http://styloot.com ), eu queria combinar três slides em um e executá-los em um loop.

Para isso, dei os três divs que queria fazer a transição entre uma classe chamada ‘createSlide’. O código html para esses três 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>

E o código javascript que fez a mágica:

$(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();
});