显示幻灯片号orbit.js基金会6 zurb

Question

我目前正在使用基金会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>

Answer 3

这是完整的jQuery代码，可以正常工作。还添加css类“轨道-幻灯片号”，在其中您要在页面上显示此内容。

function slideNumber() {
    var $slides = $('.orbit-slide');
    var totalItems = $('.orbit-container li').length;
    var $activeSlide = $slides.filter('.is-active');
    var activeNum = $slides.index($activeSlide) + 1;

    $('.orbit-slide-number').html(''+activeNum+'/'+totalItems+'');
}

slideNumber(); // call for every

// call for automatic slide change
$('[data-orbit]').on('slidechange.zf.orbit', slideNumber);