计算幻灯片数量和内部到另一个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);
        });
    })();