jquery page counter, pagination

Question

I have a problem with the next code

scorm

In the previous image you can see a scorm with a list of pages on the left and a counter down at the center.

$(document).ready(function(){
 $(".ViewerPagination__fullpage").html($("li.liItem").size()); 
 $(".ViewerPagination__page").text(1);
 
  $("li.liItem").on( "click", function(){
  var numpag = $("li.liItem").index(this);
  $(".ViewerPagination__page").text(numpag+1);
   $('a.nav_delante').on( "click", function(){
            var summa = ++numpag;         
         $(".ViewerPagination__page").text(summa+1);  
         if (summa === $("li.liItem").length) {
    $(".ViewerPagination__page").html($("li.liItem").size());
       $('a.nav_delante').off();
   }
     });
     $('a.nav_atras').on( "click", function(){
            var rest = --numpag; 
         $(".ViewerPagination__page").text(rest-1);
       if (rest === 1) {
    $(".ViewerPagination__page").text(1);
       $('a.nav_atras').off();
   }
     });
 });
 

 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!--this is the html code that I use for the list:-->

<ul class="uItem">
<li title="text1" class="liItem ">
 <div class="divItem notattempted selected" data-pag="001">
  <span class="spanItem">
  <a class="aItem">text1</a>
  </span>
 </div>
</li>
<li title="text2" class="liItem ">
 <div class="divItem notattempted" data-pag="002">
   <span class="spanItem">
   <a class="aItem">text2</a>
   </span>
 </div>
</li>
<li title="text3" class="liItem ">
 <div class="divItem notattempted" data-pag="003">
   <span class="spanItem">
   <a class="aItem">text3</a>
   </span>
 </div>
</li>
<li title="text4" class="liItem ">
 <div class="divItem notattempted" data-pag="004">
   <span class="spanItem">
   <a class="aItem">text4</a>
   </span>
 </div>
</li>
<li title="text4" class="liItem ">
 <div class="divItem notattempted" data-pag="005">
   <span class="spanItem">
   <a class="aItem">text5</a>
   </span>
 </div>
</li>
<li title="text4" class="liItem ">
 <div class="divItem notattempted" data-pag="006">
   <span class="spanItem">
   <a class="aItem">text6</a>
   </span>
 </div>
</li>
<li title="text4" class="liItem ">
 <div class="divItem notattempted" data-pag="007">
   <span class="spanItem">
   <a class="aItem">text7</a>
   </span>
 </div>
</li>
</ul>

<!--this is the html code that I use for the counter:-->

<a class="nav_atras" href="#" alt="Anterior" title="Anterior">
<button class="buttMoodle" style="height: 20px;" ></button>
</a>
<div class="ViewerPagination__container">
<span class="ViewerPagination__page"></span>
<span class="ViewerPagination__points">·</span>
<span class="ViewerPagination__fullpage"></span>
</div>
<a class="nav_delante" href="#" alt="Siguiente" title="Siguiente">
<button class="buttMoodle" style="height: 20px;"></button>
</a>

If you click on the item of the list, it works fine, but i have problems with the next and back buttons, it does not work until you select an item from the list and sometimes they work badly since they start counting -1, -2 when you press the back button and they go past the number of items in the list with the forward button.

Can someone help me to solve this problem with a best code? thanks.

Answer 1

i just uploaded the scorm, you can see it online following the next link, you only have to loging, I know, it is boring, but it is the only way that I can show you this, so I am waiting for your help.

https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=6aeec00f-7333-4537-a3f3-da6ac52e1fb3

Thanks in advance.