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