Я использую очень простой слайдер. Как остановить цикл, когда пользователь нажимает

Я использую слайдер под названием Squareslider.

НАЙТИ прикрепленный код

    (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;
        });
    });


swapC()

function swapC() {
    $('.next').trigger("click");
    window.setTimeout(function() { swapC() }, 6000)
}

})(window.jQuery);

как вы можете видеть, ползунок был ручным (он скользил только при нажатии на div с классами .prev и .next), поэтому я использую setTimeout для имитации щелчка, который заставляет слайд «переворачиваться» каждые 6 секунд.

Когда пользователь на самом деле нажимает на одну из стрелок ползунка, я бы хотел, чтобы ползунок остановился, но поскольку невозможно отличить «сработавший» щелчок от реального, я немного застрял.

Ребята, у вас есть идеи, как это сделать? Может быть, найти способ активировать ползунок без имитации щелчка в цикле?

Большое спасибо, ребята

Есть идеи?


person manujj88    schedule 29.07.2013    source источник
comment
просто очистите тайм-аут, сохранив на нем ссылку uid и вызвав clearTimeout(uid);   -  person A. Wolff    schedule 29.07.2013


Ответы (1)


Очистите тайм-аут, сохранив на нем ссылку uid и вызвав функцию clearTimeout():

(function ($) {
    var timeout;
    $('.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;
        });

        $('.stop', slider).on('click', function () {
            clearTimeout(timeout);
            return false;
        });
    });


    swapC()

    function swapC() {
        $('.next').trigger("click");
        timeout = window.setTimeout(swapC, 6000)
    }

})(window.jQuery);
person A. Wolff    schedule 29.07.2013