jQuery featured content slider
- by azz0r
Hello,
I have a content area that loops through divs and shows there content.
I'm having trouble making it display the initial content, unfortunately it waits 5000 milliseconds before triggering the very first content area to display.
Anyone spot an easy way to make it display the initial area, then slide to the next area and do them at 5000 milliseconds.
JS
Model.FeatureBar = {
current:0,
items:{},
init: function init(options){
var me = this;
me.triggers = []
me.slides = []
this.container = jQuery('#features');
jQuery('.feature').each(function(i){
me.triggers[i] = {url: jQuery(this).children('.feature-title a').href, title: jQuery(this).children('.feature-title'),description:jQuery(this).children('.feature-description')}
me.slides[i] = {image: jQuery(this).children('.feature-image')}
});
for(var i in this.slides){
this.slides[i].image.hide();
this.triggers[i].description.hide();
}
setInterval(function(){Model.FeatureBar.next()},5000);
},
next: function next(){
var i = (this.current+1 < this.triggers.length) ? this.current+1 : 0;
this.goToItem(i);
},
previous: function previous(){
var i = (this.current-1 > 1) ? this.current-1 : this.triggers.length;
this.goToItem(i);
},
goToItem: function goToItem(i){
if(!this.slides[i])
throw 'Slide out of range';
this.triggers[this.current].description.slideUp();
this.triggers[i].description.slideDown();
this.slides[this.current].image.hide();
this.slides[i].image.show();
this.current = i;
},
}
html
<div id="features">
<div class="feature current">
<div class="movie-cover">
<a href="/police/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a>
</div>
<div class="feature-image" style="display: none;">
<img src="/design/images/four-oh-four.png">
</div>
<h2 class="feature-title"><a href="/police/movie">Police</a></h2>
<p class="feature-description" style="overflow: hidden; display: block; height: 50.8604px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p>
</div>
<div class="feature">
<div class="movie-cover">
<a href="/rude/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a>
</div>
<div class="feature-image" style="display: none;">
<img src="/design/images/four-oh-four.png">
</div>
<h2 class="feature-title"><a href="/rude/movie">Rude</a></h2>
<p class="feature-description" style="overflow: hidden; display: block; height: 18.3475px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p>
</div>
<div class="feature">
<div class="movie-cover">
<a href="/brits/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a>
</div>
<div class="feature-image" style="display: block;">
<img src="/design/images/four-oh-four.png">
</div>
<h2 class="feature-title"><a href="/brits/movie">Brits</a></h2>
<p class="feature-description" style="overflow: hidden; display: block; height: 40.1549px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p>
</div>
<div class="feature">
<div class="movie-cover">
<a href="/indie/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a>
</div>
<div class="feature-image" style="display: none;">
<img src="/design/images/four-oh-four.png">
</div>
<h2 class="feature-title"><a href="/indie/movie">Indie</a></h2>
<p class="feature-description" style="overflow: hidden; display: block; height: 42.4247px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p>
</div>
