FlickityCall - prev/next event programmatically

Question

To properly handle my carousel I use flickity.

It works fine, but I'm currently trying to navigate with custom buttons.

Docs say to call carousel.flickity("next") - which I tried, but I doesn't seem to work.

import * as Flickity from 'flickity';

this.$elem = value.nativeElement;
this.carousel = new Flickity(this.$elem, {
  accessibility: true,
  prevNextButtons: false,
  pageDots: false,
  setGallerySize: false,
  draggable: true,
  freeScroll: true
});

Is there an equivalent to call the next event programmatically using javascript/typescript?

Try ```prevNextButtons: true``` in your Flickity constructor — Abhinab Rajopadhyaya, May 19 '20 at 16:54
@AbhinabRajopadhyaya I want to use custom buttons, independent from the flickity slider itself, but executing the next event. — Tom, May 19 '20 at 17:05

score 0 · Answer 1 · answered Jan 06 '21 at 13:34

Hey I got a solution for that. Use query selector to access Flickity given next buttons and click them programmatically on your custom button onClick functions. You can hide the buttons given by Flickity using css. This is a work around but not based on official docs.

/* 
    In my case I inspected the button given by Flickity and accessed those in my JS or TS file 
*/

 let temp:any = document.querySelector('.flickity-button.flickity-prev-next-button.next');
 temp.click();

In your CSS file you can add visibility property hidden so that button functionality will be intact to click programmatically but in UI as expected Flikity buttons wont be found.

.flickity-button {
    position: absolute;
    visibility: hidden;
    border: none;
    color: #8c6238 !important;
}

FlickityCall - prev/next event programmatically

1 Answers1