петля нумерация страниц стрелка - PullRequest
Новая
       7

петля нумерация страниц стрелка

0 голосов
/ 13 ноября 2018

У меня есть некоторые модалы, связанные с Jquery, и вы можете перемещаться между ними с помощью стрелок предыдущая / следующая.

Они работают нормально, но моему клиенту нужно, чтобы эти стрелки продолжали циклически повторяться при достижении последней или первой нумерации страницно я действительно не знаю, как это сделать.

Вы можете увидеть, о чем я говорю, здесь: ссылка

Если вы нажмете план, вы будете динамическиотобразить модал, и этот модал связан стрелками.

Кто-нибудь может мне помочь?вот код: 

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>
...