JavaScript 및 jQuery 슬라이더가 양방향으로 작동하지 않습니다.

Question

슬라이더 코드에 버그가 있지만 그 코드를 해결할 수 없습니다 ... 화살표를 사용하여 원하는 방향으로 스크롤 할 수 있습니다. if 한 방향으로 스크롤 한 다음 페이지를 새로 고치지 않고 다른 방향으로 스크롤하면 슬라이더가 제대로 작동하지 않습니다.

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')