循环分页jQuery箭头

Question

我有一些与Jquery相关的模式，您可以通过上一个/下一个箭头在它们之间进行导航。

它们工作正常，但我的客户需要在到达最后一个或第一个分页时，此箭头继续循环，但我真的不知道该怎么做。

您可以在这里看到我在说什么：link

如果单击一个计划，则将显示一个模态，该模态与箭头相连。

有人可以帮助我吗？ 这是代码：

var countModal =0;
    // Get the button that opens the modal
    $('.plan-wrapper').on('click', function() {
        var id = $(this).data('id');
        console.log($(this).data('count'));
        $('#myModal_'+id).css('display', 'flex');
        countModal =  $(this).data('count');
        
    })        

    // Get the button that opens the modal     
    $('.chiudi_dimensione').on('click', function() {
        var id = $(this).data('id');
        $('#myModal_'+id).hide();
    })        

    $listModal = $('.mymodal');        
    console.log($listModal);
    
    $('.freccia-indietro').on('click', function(value){  
        console.log($listModal[countModal]);
        $listModal[countModal].style.display = 'none';
        countModal = countModal -1;
        if(countModal<0){
            countModal=$listModal.count;
        }                    
        $listModal[countModal].style.display = 'flex';
    })
    
    $('.freccia-avanti').on('click', function(value){
        $listModal[countModal].style.display = 'none';
        countModal = countModal +1;
        if(countModal>$listModal.length){
            coutModal=0;
        }
        $listModal[countModal].style.display = 'flex';
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plan-wrapper" data-id='1' data-count='1'></div>
<div class="plan-wrapper" data-id='2' data-count='2'></div>


<div style="opacity:1" id="myModal_1" class="mymodal lightbox_wrapper_dimensione">
  <div class="freccia-indietro"></div>
  <div class="freccia-avanti"></div>
</div>
<div style="opacity:1" id="myModal_2" class="mymodal lightbox_wrapper_dimensione">
  <div class="freccia-indietro"></div>
  <div class="freccia-avanti"></div>
</div>