CODEWITHSUNDEEP
javascriptjqueryhtmlcss
stacking
stacking

Reputation: 33

How do I set auto timer to content slideshow?

I am using the following as a content slider but unsure as to instead have the click the button to play the slides through but wanting to take that away and for the slides to go go through on load?

DEMO

$(document).ready(function() {

var height = 300,
    width = 600,

    tabs = 3,

    $tabs = $('.tab'),
    contentNum = 1,

    delay = 2000, // time in milliseconds to pause between tabs
    timer;

$('.play').click(function(){
    var $t = $(this);
    if ($t.hasClass('playing')) {
        // stop
        clearTimeout(timer);
        $t.removeClass('playing').html('play');
    } else {
        // play
        timer = setInterval(function(){
            contentNum++; // change to contentNum--; to go left
            if (contentNum > tabs){ contentNum = 1; } // loop right
            if (contentNum < 1) { contentNum = tabs; } // loop left
            $tabs.eq(contentNum-1).find('a').trigger('click');
        }, delay);
        $t.addClass('playing').html('stop');
    }
});

$('.main_inner').css({
    width: tabs * width
});

$('a.tab_link').click(function() {

    $tabs.filter('.active').removeClass('active');
    $(this).parent().addClass('active');

    // make sure contentNum is a number and not a string
    contentNum = parseInt( $(this).attr('rel'), 10 );

    $('.main_inner').animate({
        marginLeft: '-' + (width * contentNum - width)
    }, 600);

    return false;

});


});

Upvotes: 1

Views: 205

Answers (1)

Mistic
Mistic

Reputation: 1466

No really sure what you mean.

If you wan't to autoplay on page load and keep the Play button use

$('.play').trigger('click');

If you wan't to autoplay without play/stop button replace

$('.play').click(function(){
  // you current play/pause button code
});

simply by

// play
setInterval(function(){
    contentNum++; // change to contentNum--; to go left
    if (contentNum > tabs){ contentNum = 1; } // loop right
    if (contentNum < 1) { contentNum = tabs; } // loop left
    $tabs.eq(contentNum-1).find('a').trigger('click');
}, delay);

Upvotes: 1

Related Questions