CODEWITHSUNDEEP
javascriptjqueryimageslidersetinterval
afcdesign
afcdesign

Reputation: 367

jQuery image slider loop with setInterval

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.

Upvotes: 2

Views: 13083

Answers (4)

Lucian Al-Zafari
Lucian Al-Zafari

Reputation: 37

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 combination but cant seem to grasp the correct code

Thanks

Upvotes: 0

Joe
Joe

Reputation: 82564

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

Upvotes: 2

Danil Speransky
Danil Speransky

Reputation: 30453

Demo: http://jsfiddle.net/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);​

Upvotes: 1

Josh Bedo
Josh Bedo

Reputation: 3462

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.com/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.com/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.

Upvotes: 0

Related Questions