显示幻灯片编号orbit.js基础6 zurb

Question

我目前在Foundation 6中使用orbit.js滑块，但没有看到显示幻灯片编号的选项。

请问您可以给我建议或者分享实例。

谢谢！

Answer 1

下面是一个使用jQuery的示例，它将.slide-number类的元素的innerHTML样本更改为活动幻灯片编号，并在每次幻灯片更改时将活动幻灯片编号记录到控制台。

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

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

信用：我想出了这个答案与this SO post帮助。

Answer 2

你可以用普通的CSS来实现这一点。

.orbit-parent { 
    counter-reset: orbit-bullet-num; 
} 

.orbit-bullets button::after { 
    content: counter(orbit-bullet-num); 
    counter-increment: orbit-bullet-num; 
} 

<div class="orbit-parent"> 
    <div class="orbit" aria-label="Slider" data-orbit> 
     <ul class="orbit-container"> 
     ... 
     ... 
     </ul> 
     <nav class="orbit-bullets" aria-label="Slider Navigation"> 
      <button data-slide="0" class=""><span class="show-for-sr">First slide details.</span></button> 
      <button data-slide="1" class=""><span class="show-for-sr">Second slide details.</span></button> 
      <button data-slide="2" class="is-active"><span class="show-for-sr">Third slide details.</span><span class="show-for-sr">Current Slide</span></button> 
     </nav> 
    </div> 
</div>