I have this markup:

<div id="imagedisplay">
    <div class="slider_item active"></div>
    <div class="slider_item"></div>
    <div class="slider_item"></div>
    <div class="slider_item last"></div>
</div>

and this script

setInterval(function(){
    $('.slider_item.active').fadeOut().removeClass('active')
        .next('.slider_item').fadeIn().addClass('active');
}, 5000);

How do I make this loop in the best way? Right now the last image just fades out, without the first image fading in again.

I have this markup:

<div id="imagedisplay">
    <div class="slider_item active"></div>
    <div class="slider_item"></div>
    <div class="slider_item"></div>
    <div class="slider_item last"></div>
</div>

and this script

setInterval(function(){
    $('.slider_item.active').fadeOut().removeClass('active')
        .next('.slider_item').fadeIn().addClass('active');
}, 5000);

How do I make this loop in the best way? Right now the last image just fades out, without the first image fading in again.

• javascript
• jquery
• image
• slider
• setinterval

Share Improve this question Follow edited Sep 6, 2012 at 15:28 Danil Speransky 30.5k66 gold badges6969 silver badges7878 bronze badges asked Sep 6, 2012 at 13:30 afcdesignafcdesign 36722 gold badges66 silver badges1616 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Check if nextItem has items and if not set it back to the first:

var nextItem = $('.slider_item.active')
    .fadeOut()
    .removeClass('active')
    .next('.slider_item');

if (nextItem.length === 0) {
   nextItem = $('.slider_item').first();
}

nextItem.fadeIn().addClass('active');

Here's an example: jsFiddle

Demo: http://jsfiddle/gdS8Q/2/

var cur = 0;
var count = $('.slider_item').length;

$('.slider_item').hide();
$('.slider_item').eq(0).show();

setInterval(function() {    
    $('.slider_item').eq(cur).fadeOut(function () {
        $(this).removeClass('active');
        cur = (cur + 1) % count;
        $('.slider_item').eq(cur).addClass('active').fadeIn();
    });
}, 2000);​

I actually just wrote a plugin for this and it's pretty readable so you can probably understand by just looking at it.

Github repo - https://github./joshbedo/fullPageSlider/blob/master/fullpagesliderV2.js

Some of the functionality for arrows is still being worked on to be more dynamic but it works here is an example as well. I'm sliding html but you can easily just add a .slide-panel class with images inside.

In action http://strikingalchemy.publishpath./portfolio

EDIT: They edited the script so it doesn't have a setInterval loop the original on github has a interval loop once the user clicks the arrow and is interested to see more. Easily changeable if you want it to loop on load.. I just didn't want to use extra resources when the user wasn't interested. Going to put an example on github later after work.

I know it is bumping an old thread, but can someone tell me the correct code to display the previous div?

This is the HTML

<div id="imagedisplay">
    <div class="slider_item active"></div>
    <div class="slider_item"></div>
    <div class="slider_item"></div>
    <div class="slider_item last"></div>
</div>

and the jQuery

     var nextItem = $('.slider_item.active')
        .fadeOut()
        .removeClass('active')
       .next('.slider_item');

 if (nextItem.length === 0) {
       nextItem = $('.slider_item').first();
    }
       nextItem.fadeIn().addClass('active');

I saw the jsfiddle link and tried various bination but cant seem to grasp the correct code

Thanks