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

【问题标题】：display slide number orbit.js foundation 6 zurb显示幻灯片编号 orbit.js 基础 6 zurb
【发布时间】：2015-12-23 17:35:03
【问题描述】：

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

您能否就此提供建议或分享示例。

谢谢！

【问题讨论】：

Danila，如果你已经成功实现了 Foundation 6 Orbit，你能在这里向我们展示一个基本的实现吗：stackoverflow.com/questions/35921586/…

标签： javascript jquery zurb-foundation orbit zurb-foundation-6

【解决方案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 的帮助下想出了这个答案。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

这是完整的 jQuery 代码，可以正常工作。还要在页面上要显示的位置添加 css 类“orbit-slide-number”

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

【讨论】：

【解决方案4】：

对于那些可能想要使用 vanilla js 的人：

function slideNumbers() {
  const arrows = document.getElementsByClassName("orbit-arrow");
  const target = document.getElementById("currentSlide");
  [...arrows].forEach(function(arrow) {
    arrow.addEventListener("click", function() {
      const currentSlide = document.querySelector(".is-active");
      target.textContent = Number(currentSlide.getAttribute("data-slide")) + 1;
    });
  });
}

【讨论】：