单击时显示数组中的下一个图像

我正在努力设置可以通过屏幕箭头点击的图像。目前，我的图像全部通过循环和数组显示。我已经能够进行设置，以便当您将鼠标悬停在小图像预览上时，主图像将更改为该图像。也就是说，您可以将鼠标悬停在它们上以查看更大的版本。

我的数组位于 mongo 模型内：Listings.currentimages

我当前的代码可以在鼠标悬停时获取一个小图像来接管特色图像。如何更改代码以使用屏幕上的左/右箭头？

<% var imgsrc = awspath + listings.currentimages[0] %>
<img  id='mainPicture' class="image-resposive" src=<%=imgsrc%>>
<div id='allimages'>
    <% for(var i = 0; i < listings.currentimages.length; i++ ) { %>
        <div class='smallerImages'>
            <% var imgsrc = awspath + listings.currentimages[i] %>
            <img class="small" src="<%= imgsrc %>">
        </div>
    <% } %>
</div> 

悬停功能：

$('.small').hover(function() {
    $('.small').removeClass('selectedImage')
    var src = $(this).attr('src');
    $(this).addClass('selectedImage')
    $('#mainPicture').attr('src', src);
});

假设您有两个图标（下一个/上一个），您可以定义以下两个事件处理程序以便向右或向左移动：

$('#nextArrow').on('click', function(e) {
    var anchestor = $('.small.selectedImage').closest('.smallerImages');
    var nextImg = $('#allimages .smallerImages:first .small');
    if (anchestor.next().length != 0) {
       nextImg = anchestor.next().find('.small');
    }
    $('.small').removeClass('selectedImage');
    var src = nextImg.attr('src');
    nextImg.addClass('selectedImage');
    $('#mainPicture').attr('src', src);
})


$('#prevtArrow').on('click', function(e) {
    var anchestor = $('.small.selectedImage').closest('.smallerImages');
    var nextImg = $('#allimages .smallerImages:last .small');
    if (anchestor.prev().length != 0) {
        nextImg = anchestor.prev().find('.small');
    }
    $('.small').removeClass('selectedImage');
    var src = nextImg.attr('src');
    nextImg.addClass('selectedImage');
    $('#mainPicture').attr('src', src);
})