NickPiscitelli/Glider.js

Navigation buttons in every slide?

Opened this issue · 9 comments

rhedman commented

I'm wondering if it's possible to have a set of next/prev buttons in every slide instead av two global ones? Just adding them breaks the Glider and I've tried to define them as an array but doesn't work. The reason for this is that I want to use the Glider as a step-by-step mini course interface and the nav buttons need to be contextual.

Thank you!

rhedman commented

I've figured it out, here is my solution:

const nextBtns = document.querySelectorAll('.js-glider-next');
const prevBtns = document.querySelectorAll('.js-glider-prev');

let slideIndex = 0;

if (nextBtns) {
    [].forEach.call(nextBtns, (nextBtn) => {
	nextBtn.addEventListener('click', () => {
		slideIndex += 1;
		Glider.scrollItem(slideIndex, false);
	});
    });
}

if (prevBtns) {
    [].forEach.call(prevBtns, (prevBtn) => {
	prevBtn.addEventListener('click', () => {
		slideIndex -= 1;
		Glider.scrollItem(slideIndex, false);
	});
    });
}
NickPiscitelli commented

It might be easier to trigger a click of the paging element as opposed to attempting to call scrollItem manually.

rhedman commented

That would work too but it would require hidden paging buttons though.

NickPiscitelli commented

Yeah, but it will ensure all events fire as well as have better compatibility with any future releases.

Also, you can ask Glider for the current index with the getCurrentSlide method.

rhedman commented

OK hmm, that method is not mentioned under "Methods" in the documentation so I didn't know it existed.

NickPiscitelli commented
rhedman commented

So is this how you mean?
Glider.scrollItem(_.getCurrentSlide(), true);
It seems to work

EDIT: Never mind, it does not work :)

EDIT2:
This does work though, still not sure if this is how you meant it

let slideIndex = Glider.getCurrentSlide();
Glider.scrollItem(slideIndex += 1, true);
NickPiscitelli commented
rhedman commented

Great, thank you :)