JavaScriptとjQueryスライダが両方向で動作しない

Question

私はスライダコードにバグがありますが、私はそれを理解できません...どちらかの矢印を使用して私が望む方向にスクロールできます私は一方向にスクロールし、ページをリフレッシュせずにもう一方をスクロールすると、スライダが正しく動作しません。

var box = $('.slider'); 
    var images = $('.images'); 
    images.addClass('hidden'); 
    images.eq(0).addClass('active'); 
    images.eq(0).removeClass('hidden'); 

    $("#arrow-right").click(function() { 

    var image = box.find('.active'); 
console.log(image); 
    images.removeClass('active'); 
    image.removeClass('zoomInLeft'); 
    image.addClass('zoomOutRight'); 
    if (image.index() + 1 == images.length) { 
     var nextImage = images.eq(0); 
    } else { 
     nextImage = images.eq(image.index() + 1); 
    } 
    nextImage.removeClass('hidden'); 
    nextImage.addClass('active'); 
    nextImage.removeClass('zoomOutRight'); 
    nextImage.addClass('zoomInLeft'); 
    }); 

    $("#arrow-left").click(function() { 

    var image = box.find('.active'); 
console.log(image); 
    images.removeClass('active'); 
    image.removeClass('zoomInRight'); 
    image.addClass('zoomOutLeft'); 

    if (image.index() - 1 < 0) { 
     var preImage = images.eq(2); 
    } else { 
     preImage = images.eq(image.index() - 1); 
    } 
    preImage.removeClass('hidden'); 
    preImage.addClass('active'); 
    preImage.removeClass('zoomOutLeft'); 
    preImage.addClass('zoomInRight'); 
    }); 

現在のスライダーのライブバージョンを見つけることができます：https://s.codepen.io/AdamHJacks/debug/bZaWKK#slider

は、任意の助けをありがとう！

Answer 1

アクティブなイメージのキューがzoomOutクラスで終わる場合は考慮されていません。そのため、アクティブな要素の両方のzoomOutクラスを削除するように修正されています。

次の編集を行います。

nextImage.removeClass('zoomOutRight') =>nextImage.removeClass('zoomOutLeft zoomOutRight')

preImage.removeClass('zoomOutLeft') =>preImage.removeClass('zoomOutRight zoomOutLeft')