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 ></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>
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();
});
Written by Pushkraj Dole
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#