CODEWITHSUNDEEP
jquery
Andy
Andy

Reputation: 1432

How to get this slideshow to automatically rotate

http://jsfiddle.net/AndyMP/CkuKe/

It works beautifully, but only when prev/next is clicked. Can it be persuaded to run automatically as well?

Upvotes: 0

Views: 1567

Answers (2)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79850

Edit: Updated code to auto slide after clicking on #next/#prev.

Note: After clicking on the #next/#prev, the autoSlide is called after 2 secs to make.

DEMO

/* home slide show */

var $slides = $('.slideshow_item');
var slide_pos = 0;
var slide_len = $('.slideshow_item').length;
var slide_int = 0;

$slides.filter(':gt(0)').hide();

autoSlide();

function autoSlide() {
    slide_pos = 0;
    slide_int = setInterval(function() {
        $slides.eq(slide_pos % slide_len).fadeOut(500);
        $slides.eq(++slide_pos % slide_len).fadeIn(500);
    }, 500);
}

$('#next').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(++slide_pos % slide_len).fadeIn(500);

    clearInterval(slide_int);
    setTimeout(autoSlide, 2000);
});

$('#prev').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(--slide_pos % slide_len).fadeIn(500);

    clearInterval(slide_int);
    setTimeout(autoSlide, 2000);
});

Just add that 2 line of code that you have #next inside the setInterval.

DEMO

slide_int = setInterval(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(++slide_pos % slide_len).fadeIn(500);
}, 500);

Upvotes: 1

Ayush
Ayush

Reputation: 42450

Here you go. You were mostly correct in calling the click handler every 500ms, but the clearInterval was stopping it after the first iteration.

Demo

    /* home slide show */

var $slides = $('.slideshow_item');
var slide_pos = 0;
var slide_len = $('.slideshow_item').length;

$slides.filter(':gt(0)').hide();

slide_int = setInterval(function() {
    $('#next').click();
}, 500);

$('#next').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(++slide_pos % slide_len).fadeIn(500);

    //clearInterval(slide_int);
});

$('#prev').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(--slide_pos % slide_len).fadeIn(500);

    //clearInterval(slide_int);
});​

Upvotes: 1

Related Questions