幻灯片箭头上的活动状态

Question

我正在尝试添加一个类，当滑块处于活动状态时，箭头应处于活动状态。例如。如果有5个图像，并且用户移动到第二个图像，则左箭头应删除禁用类。

因此，两个箭头现在都可以向左或向右移动。如果用户达到第5张图片，则右侧的箭头已禁用。

这似乎不想工作 - 任何人都可以就我应该采取的方式提出建议。

＆＃13;

＆＃13;

$('#product-gallery-super').children().click(function (e) {
    e.preventDefault();
    var prodImg = $(this).attr('data-image');
    var imgSrc = $(this).children().attr('src')

    if (imgSrc != '/images/imagecomingsoon_en.jpg') {

        $(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail");

        $('.main-image').attr('src', prodImg);

    }

});

$("#prev").click(function () {

    if ($("#product-gallery-super .active-thumbnail").prev().length != 0) {
        $("#product-gallery-super .active-thumbnail").prev().addClass('active-thumbnail').next().removeClass('active-thumbnail');

        $('.main-image').attr('src', $('#product-gallery-super').find('.active-thumbnail').data('image'));

    }
    return false;
});

$("#next").click(function () {

    if ($("#product-gallery-super .active-thumbnail").next().length != 0) {
        $("#product-gallery-super .active-thumbnail").next().addClass('active-thumbnail').prev().removeClass('active-thumbnail');

        $('.main-image').attr('src', $('#product-gallery-super').find('.active-thumbnail').data('image'));

    }
    return false;
});

＆＃13;

.active-thumbnail {
    display: inline-block;
    border: 1px solid black;
}

#prev{
    opacity:1;
}
#prev.disabled{
    opacity:0.5;
}

#next{
    opacity:1;
}
#next.disabled{
    opacity:0.5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img class="main-image image-resize" src="http://placehold.it/300x400?text=1" data-zoom-image="http://placehold.it/1000x2000?text=1" onerror="comingSoonMain(this)">
<button name="prev" id="prev" class="disabled">Prev</button>
<button name="next" id="next">Next</button>
<div id="product-gallery-super"> <a href="#" class="product-zoom-gallery active-thumbnail" data-image="http://placehold.it/300x400?text=1">
    <img src="http://placehold.it/61x79?text=1">
  </a>
 <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=2">
    <img src="http://placehold.it/61x79?text=2">
  </a>
 <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=3">
    <img src="http://placehold.it/61x79?text=3">
  </a>
 <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=4">
    <img src="http://placehold.it/61x79?text=4">
  </a>
 <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=5">
    <img src="http://placehold.it/61x79?text=5">
  </a>
 <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=6">
    <img src="http://placehold.it/61x79?text=6">
  </a>

</div>

＆＃13;

＆＃13;

＆＃13;