スライド数と別のdivの内側の数

Question

基礎6で軌道スライダに表示番号を表示しようとしています。私は既に前と次のナビゲーションボタンを変更しています。スライダーの番号を表示する代わりに弾丸弾丸を表示します。私は合計と現在のスライドが必要です。たとえば上の

(function() { 
function slideNumber() { 
var $slides = $('.orbit-slide'); 
var $activeSlide = $slides.filter('.is-active'); 
var activeNum = $slides.index($activeSlide) + 1; 
$('.slider-number').innerHTML = activeNum; 
console.log(activeNum); 
} 

$('[data-orbit]').on('slidechange.zf.orbit', slideNumber); 
})(); 


    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit> 
       <ul class="orbit-container"> 
        <button class="orbit-previous"><span class="show- for-sr">Previous Slide</span><li></li></button> 
        <button class="orbit-next"><span class="show-for-sr">Next Slide</span><li></li></button> 
        <li class="is-active orbit-slide"> 
         <img class="orbit-image" src="../images/demo-img/screen-shot.png" alt=""> 
        </li> 
        <li class="orbit-slide"> 
         <img class="orbit-image" src="../images/demo-img/screen-shot.png" alt=""> 
        </li> 
        <li class="orbit-slide"> 
         <img class="orbit-image" src="../images/demo-img/screen-shot.png" alt=""> 
        </li> 
        <li class="orbit-slide"> 
         <img class="orbit-image" src="../images/demo-img/event-demo.png" alt=""> 
        </li> 
       </ul> 
       <nav class="orbit-bullets"> 
        <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button> 
        <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button> 
        <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button> 
        <button data-slide="3"><span class="show-for-  sr">Fourth slide details.</span></button> 
       </nav> 
       <div class="slider-number"></div> 
      </div> 

Answer 1

It's work great. 
    (function() { 
     function slideNumber() { 
      var totalItems = $('li.orbit-slide').length; 
      var currentItem = $('li.orbit-slide.is-active').index() - 1; 
      $('.slider-number').html(currentItem + '/' + totalItems); 
     } 
     document.addEventListener("DOMContentLoaded", function() { 
      $('[data-orbit]').on('slidechange.zf.orbit', slideNumber); 
     }); 
    })();