1

So I have a slider setup and it all works fine until I start clicking the previous and next button multiple times before the slide has finished animating in (I am using the slideMove function to do this) ... I have read up on the Deferred method but I cant for the life of me figure out how to get this to work... or even if it is the way to go... can anyone see how to solve this?

I would add it to jfiddle, but I call in my images via ajax.

$(document).ready(function(){

var folder = "imgs/";
var imgArr = [];
var imgPath = [];

function loadImages() {
  //my ajax is here calling the images into the array
}


$.when( loadImages() ).done(function(a1){

//responsive width  
var theWidth = $(window).width();
$('#autoSlider , .moveLeft , .sliderContainer ').css({'width': theWidth });
$( window ).resize(function() { 
  theWidth = $(this).width();
  $('#autoSlider , .moveLeft , .sliderContainer ').css({'width': theWidth });
  $('.shrink').css({'width': theWidth - 40 });
  console.log(theWidth);
});

var slideTime = 3000;
var imgInd = 0;
var shrink = {'width': theWidth - 40, 'height': 'calc(80vh - 20px)', 'left': '20px', 'bottom': '25px'};


prevNext = 0; //if this is 0 go to next if it is 1 goto prev

 var slideMove = function(){

    var turnary = (prevNext === 0)? imgInd++ : imgInd-- ; 

    if ( imgInd >= imgArr.length ){ imgInd = 0; }
    if ( imgInd < 0 ){ imgInd = imgArr.length - 1; }
    clearInterval(auto);
    $('.imageholder').prepend('<div class = "moveLeft"></div>');
    $('.moveLeft').css({'width': theWidth });

    if(prevNext === 0){$('.moveLeft').css({ 'background-image': 'url(' + imgPath[imgInd] + ')' , 'left' : theWidth });}
    else if(prevNext === 1){$('.moveLeft').css({ 'background-image': 'url(' + imgPath[imgInd] + ')' , 'left' : 0 - theWidth });}

    prevNext = 0;
    $('#autoSlider').addClass( "shrink" , 200);
    $('.moveLeft').animate({ 'left' : '0px' }, "slow" , function(){ 
        $('#autoSlider').css({ 'background-image': 'url(' + imgPath[imgInd] + ')'});
        $('#autoSlider').removeClass( "shrink");
        $('.moveLeft').remove(); 

        auto = setInterval(slideMove, slideTime);
    }); 

};

$('#autoSlider').css({ 'background-image': 'url(' + imgPath[imgInd] + ')'});

//below are the listeners for the prev and next buttons

$('#sliderNext').on( 'click' , function(){ prevNext = 0; slideMove(); });
$('#sliderPrev').on( 'click' , function(){ prevNext = 1; slideMove(); });


var auto = setInterval(slideMove, slideTime);

$('#autoSlider').mouseenter(function(event) {
    clearInterval(auto);
}).mouseleave(function(event) {
    auto = setInterval(slideMove, slideTime);
});


});
Sony ThePony
  • 315
  • 1
  • 2
  • 13
  • 1
    Why don't you check on click if your `$('#autoSlider')` has the class `shrink` or check if your element is animating (http://stackoverflow.com/questions/724911/how-do-i-find-out-with-jquery-if-an-element-is-being-animated) or check if the element with the class `moveLeft` is existing? – user3528269 Sep 10 '16 at 15:35
  • I thought about that, I was going to disable the click events while the animation was active... but I was wondering if there was a better way? Thanks for the link by the way, I learned a completely new way of looking at the issue. – Sony ThePony Sep 11 '16 at 10:00

0 Answers0