計算幻燈片的數量和內部到另一個div

我嘗試在軌道滑塊上顯示基數6.我已經更改了上一個和下一個導航按鈕。熱顯示滑塊號碼，而不是軌道子彈。我需要全部和當前的幻燈片。計算幻燈片的數量和內部到另一個div

像例如

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

來源

2016-09-22 Palaniichuk Dmytro

你試過'。對（「後滑動change.fndtn.orbit」功能（事件，軌道）{ $（」。slider-數字「）。text（orbit.slide_number +」/「+ orbit.total_slides）; }）;'從他們的文檔：http://foundation.zurb.com/sites/docs/v/5.5.3/components/ orbit.html – Sam0

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); 
     }); 
    })();

來源

2016-09-23 22:26:22

計算幻燈片的數量和內部到另一個div

回答

相關問題