jquery модальное изображение с предыдущей и следующей кнопкой

Question

я действительно плох в javascript и jquery. У меня есть страница с несколькими изображениями, и я разработал модал, который показывает каждый раз, когда я нажимал на изображение вместе со слайдером. То, что я сейчас пытаюсь сделать sh, - это функциональность предыдущего и следующего внутри модала. Думаю, я добираюсь, но у меня есть две проблемы:

• скажем, я нажимаю кнопку «следующий взгляд» несколько раз, в тот момент, когда я нажимаю кнопку «предыдущий», он все еще перемещает одно изображение вперед и затем начинает go назад; то же самое, если я сначала нажму кнопку «prev»;
• Я не смогу сделать ее равной l oop в пределах количества изображений, загруженных на страницу. Если я продолжаю нажимать кнопку «Далее», она продолжает считать до бесконечности;

Вот html страницы, которая загружается:

<div class="grid lookbook_grid">
    <div class="single_look">      
        <img src="https:....jpg" alt="#1">
        <img src="https:....jpg" alt="">
    </div>  
    <div class="single_look">      
       <img src="https://....jpg" alt="#2">
       <img src="https://...jpg" alt="">
    </div>  
    <div class="single_look">...</div>  
    <div class="single_look">...</div>
</div>

Как вы можете видеть внутри в каждом 'single_look' есть два изображения, а первое имеет тег alt. В тот момент, когда я нажимаю на div 'single_look', появляется модальное изображение с изображением, которое имеет тег alt и слайдер с большим количеством изображений внешнего вида. Jquery указывает на альт изображения и делает его больше внутри модала.

Вот html модала с кнопкой prev и next:

<div class="lookbook_layer lookbook_layer--open">
    <div class="look_nav look_nav--prev">
        <a href="#">previous look</a>
    </div>
    <div class="look_nav look_nav--next">
        <a href="#">next look</a>
    </div>
    <div class="layer_col layer_col--left">
        <picture><img alt="#2" src="example`enter code here`" class="show"></picture>
    </div>
    <div class="layer_col layer_col--right">
        <div class="look_detail look_detail--1"> owl carousel with images </div>
        <div class="look_detail look_detail--2 show"> owl carousel with images </div>
        <div class="look_detail look_detail--3"> owl carousel with images </div>
        <div class="look_detail look_detail--4"> owl carousel with images </div>

            ... more look_detail div 

    </div>
</div>

Ниже jquery Я написал для «следующей кнопки»:

var numLooks = $('.single_look').length;
var target = $('.layer_col--left picture');

$('.look_nav--next').on('click',function() {
    var nextLookNum = parseInt(currentLayer);
    var nextLookStr = nextLookNum;
    var nextLook = '' + nextLookStr;
    var nextLookDef = "#"+nextLook;
    var src = $('.single_look img[alt="'+nextLookDef+'"]').attr("src");

    currentLayer++;
    $('.layer_col--left img').removeClass('show');

    target.html('<img class="show" alt="'+nextLookDef+'" src="'+src+'">');

    $('.look_detail.show').removeClass('show');
    $('.look_detail.look_detail--'+nextLook).addClass('show');
});

переменная currentLayer используется над этим фрагментом кода, чтобы показать 'look_detail' внутри модального окна. Вот как это используется:

var currentLayer = 0;
$( '.lookbook_grid img' ).on('click', function() {
    currentLayer = $(this).attr('alt').split('#').join('');
    $('.look_detail.look_detail--'+currentLayer).addClass('show');
        return false;
});

Я надеюсь, что это не слишком запутано, и объяснение достаточно ясно. Любая помощь будет оценена.

Спасибо!