Skip to content

Instantly share code, notes, and snippets.

@hadl

hadl/slider-prev-next-buttons.js

Created July 1, 2020 08:23
Show Gist options
  • Save hadl/28a59edd2422acd4b9dfee97208ed40b to your computer and use it in GitHub Desktop.
Save hadl/28a59edd2422acd4b9dfee97208ed40b to your computer and use it in GitHub Desktop.
Download ZIP
Flickity next/prev buttons disable on "last page" when using contain
Raw
slider-prev-next-buttons.js
import Flickity from 'flickity';
(() => {
const { PrevNextButton } = Flickity;
const parentUpdate = PrevNextButton.prototype.update;
PrevNextButton.prototype.update = function update() {
parentUpdate.call(this);
if (this.parent.slideableWidth < this.parent.size.innerWidth) {
this.disable();
// this.element.classList.add('hide');
} else if (this.element.classList.contains('hide')) {
// this.element.classList.remove('hide');
}
// disable next button of "last page"
if (this.parent.options.contain) {
const { cells } = this.parent;
let isEnabling = true;
const selectedCell = cells[this.parent.selectedIndex];
if (!this.isPrevious) {
isEnabling = selectedCell.target + this.parent.size.width < this.parent.slideableWidth;
const method = isEnabling ? 'enable' : 'disable';
this[method]();
}
}
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment