jQuery featured content slider

Question

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>

Answer 1

In your init function when setting the interval, just call it once immediately as well, like this:

setInterval(function(){Model.FeatureBar.next()},5000);
Model.FeatureBar.next();

Also, if you're calling a function without any parameters, you can pass just the function, no need for an anonymous method wrapping it, like this:

setInterval(Model.FeatureBar.next,5000);
Model.FeatureBar.next();