显示幻灯片编号orbit.jsfoundation6zurb
display slide number orbit.js foundation 6 zurb
我目前正在Foundation 6中使用orbit.js滑块,但没有看到显示幻灯片编号的选项。
你能给我一些建议吗?或者分享一些例子。
谢谢!
这里有一个使用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);
来源:我在这个SO帖子的帮助下得出了这个答案。
您可以使用纯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>
这是完整的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);
对于那些可能想要使用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;
});
});
}
相关文章:
- 没有找到相关文章