как предотвратить больше щелчка в слайдере jquery

Question

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

вот живой слайдер, посмотрите. https://nur-alam.github.io/jQuerySlider/

вот мой код jquery.

(function($){ 


    var _gallery = $('#slider'); 
    _gallery.find('ul').attr('class','slides'); 
    _gallery.find('ul>li').attr('class','slide'); 
    var _slides = _gallery.find('.slides'); 
    var _slide = _gallery.find('.slide'); 


    _gallery.find('li:first').clone(true).appendTo(_gallery.find('ul')); 
    _gallery.find('ul>li:first').addClass('active'); 

    totalSlides = _gallery.find('li').length; 
    mainDivWidth = _gallery.outerWidth(true); 
    eachSlideWidth = _gallery.find('li').outerWidth(true); 
    totalWidth = totalSlides*eachSlideWidth; 


    _gallery.find('ul').css('width',totalWidth); 
    _gallery.find('ul>li').css('width',mainDivWidth); 


    /*previous sliding function*/ 
    $('.prev_area').click(function(event){ 
     event.preventDefault(); 

     /*getting the index of active li element*/ 
     index = _gallery.find('.active').index(); 

     active = _gallery.find('.active'); 
     activeNext = active.prev(); 
     console.log(active); 
     console.log(activeNext); 

     /*if active li element is first li then go to last slide*/ 
     if(index == 0){ 
      activeNext = _gallery.find('ul>li').eq(totalSlides-2); 
      activeNext.addClass('active'); 
      firstActive = _gallery.find('.active').eq(0); 
      firstActive.removeClass('active'); 
      _slides.css('margin-left',-(totalWidth-eachSlideWidth)); 
      _slides.animate({'margin-left':'+='+mainDivWidth},750,'swing'); 
     }else{ 
      activeNext.addClass('active'); 
      active.removeClass('active'); 
      _slides.animate({'margin-left':'+='+mainDivWidth},750,'swing'); 
     } 

    }); 



    /* next sliding function*/ 
    function nextSlideing(){ 

     /* getting the index of active li element*/ 
     index = _gallery.find('.active').index(); 

     active = _gallery.find('.active'); 
     activeNext = active.next(); 
     activeNext.addClass('active'); 
     firstActive = _gallery.find('.active').eq(0); 
     firstActive.removeClass('active'); 

     _slides.animate({'margin-left':'-='+mainDivWidth},750,'swing',function(){ 
      /*if active index is last li element then add active class to first li element*/ 
      if(index===(totalSlides-2)){ 
       _gallery.find('ul>li').removeClass('active'); 
       _gallery.find('ul>li:first').addClass('active'); 
       _slides.css('margin-left',0); 
      } 
     }); 

    } 


    /* next cliking event*/ 
    $(document).on('click','.next_area',function(event){ 
     event.preventDefault(); 
     nextSlideing(); 
    }); 

}(jQuery)) 

Answer 1

Похоже, вы делаете карусель. Есть несколько действительно хороших каруселей, но это не то, о чем вы просили. Вероятно, вы хотите избежать скольжения, когда вы уже находитесь в анимации.

-Edit-

Основываясь на том, что я думаю, что вы хотите сказать, что в ваших комментариях и пересматривают свой код, isSliding должен быть сброшен в полном дозвона одушевленных() вызов вместо конца nextSlideing [sic]. Вам также нужно сделать что-то подобное в своей предыдущей версии слайдов.

var isSliding = false; 
/* next sliding function*/ 
function nextSlideing(){ 
    if (!isSliding) { 
    isSliding = true; 
    /* getting the index of active li element*/ 
    index = _gallery.find('.active').index(); 

    active = _gallery.find('.active'); 
    activeNext = active.next(); 
    activeNext.addClass('active'); 
    firstActive = _gallery.find('.active').eq(0); 
    firstActive.removeClass('active'); 

    _slides.animate({'margin-left':'-='+mainDivWidth},750,'swing',function(){ 
     /*if active index is last li element then add active class to first li element*/ 
     if(index===(totalSlides-2)){ 
      _gallery.find('ul>li').removeClass('active'); 
      _gallery.find('ul>li:first').addClass('active'); 
      _slides.css('margin-left',0); 
     } 
     isSliding = false; 
    }); 
    } 
} 

Answer 2

Я решаю свою проблему с unbind mehtod.