I am currently working with orbit.js slider in Foundation 6 and not seeing an option to display slide number.
Could you advice me on this or share examples please.
Thanks!
I am currently working with orbit.js slider in Foundation 6 and not seeing an option to display slide number.
Could you advice me on this or share examples please.
Thanks!
Here's an example using jQuery that will change the innerHTML
propery of an element with the class .slide-number
to the active slide number, and log the active slide number to the console every time the slide changes.
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);
Credit: I came up with this answer with the help of this SO post.
You can achive this with plain 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>
This is full jQuery code to properly working. Also add css class "orbit-slide-number" where you want to show this on the page
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);
For those of you who might want to use 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;
});
});
}