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