如何在模态照片库中使用上一个和下一个按钮

Question

我用Bootstrap制作了一个具有模态功能的图片库。我在模态中添加了“上一个”和“下一个”按钮，以显示上一个/下一个图像，但是它们不起作用。 我想我在选择上一个/下一个按钮的“ src”时遇到了麻烦。

HTML：

//image gallery
<div class="gallery justify-content-center">
    <div class="img">
        <img src="images/vink.jpg" alt="Appelvink">
    </div>
    <div class="img">
        <img src="images/eekhoorn.jpg" alt="Eekhoorn">
    </div>
    <div class="img">
        <img src="images/pimpelmees.jpg" alt="Pimpelmees">
    </div>
</div>

//modal
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <img src="" class="imagepreview" alt="" style="width:100%;" >  
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>                     
            </a>                        
        </div>
    </div>
</div>

jQuery

//prev button
    $('.carousel-control-prev').on('click', function() {
        $('#imagemodal').modal('hide');
        var src = $(this).siblings('img').attr('src'); //current image
        var srcprev = $(this).parent('#imagemodal').siblings('.gallery').find("img[src='"+src+"']").prev('img').attr('src'); //prev image
        $('.imagepreview').attr('src', srcprev);
        $('#imagemodal').modal('show');
    });

//next button   
    $('.carousel-control-next').on('click', function() {
        $('#imagemodal').modal('hide');
        var src = $(this).siblings('img').attr('src'); //current image
        var srcnext = $(this).parent('#imagemodal').siblings('.gallery').find("img[src='"+src+"']").next('img').attr('src'); //next image
        $('.imagepreview').attr('src', srcnext);
        $('#imagemodal').modal('show');
    });