CODEWITHSUNDEEP
jqueryslider
Raghav
Raghav

Reputation: 162

Add a automatic slide option to jquery plugin

I intend to use this slider in a website but it doesn't have the auto play option. It just slides on mouse click event.

The jquery is as:

(function($){

    $('.square-slider').each(function(){
        var slider = $(this),
            slides = slider.find('.slide'),
            currentSlide = 0;

        slides.show();
        $(slides[currentSlide]).addClass('active');
        $('.next,.prev', slider).show();

        $('.prev', slider).on('click', function(){
            slides.removeClass('active');
            currentSlide--;
            if(currentSlide < 0) currentSlide = slides.length - 1;
            $(slides[currentSlide]).addClass('active');
            return false;
        });

        $('.next', slider).on('click', function(){
            slides.removeClass('active');
            currentSlide++;
            if(currentSlide > slides.length - 1) currentSlide = 0;
            $(slides[currentSlide]).addClass('active');
            return false;
        });
    });

})(window.jQuery);

What shall i add to enable it auto slide from one image to another.

Upvotes: 0

Views: 1104

Answers (2)

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

what you can do is trigger next button click event at periodic time.

Example

setInterval(function(){
  $('.next').trigger('click');
},2000);

DEMO

Upvotes: 1

AJ Naidas
AJ Naidas

Reputation: 1424

wrap these code in a function like :

function next() {

slides.removeClass('active');
currentSlide++;
if(currentSlide > slides.length - 1) currentSlide = 0;
$(slides[currentSlide]).addClass('active');

}

then you can make use of javascript's setInterval() function like :

setInterval( next(), 5000);

That way, the next() function will execute every 5 seconds.

Upvotes: 1

Related Questions