There is a way to intercept carousel navigation changes?

[gsmeira]

Is your feature request related to a problem? Please describe. It's not a problem. I just want more flexibility to tweak some custom behaviors I have in my use case.

Describe the solution you'd like I would like a way to add a callback function to be called every time a navigation happen in the carousel.

Describe alternatives you've considered Maybe a new prop in the <Carousel /> component to pass a callback function that receive as arguments the next and previous slide.

[leifriksheim]

This would be super useful to be able to listen to an event called @change for example, so I know the current index value of the carousel.

[franco-onevillas]

Hi there,

On mobile when you are scrolling on the page and you scroll down the page over the carousel it changes the slide and It would be great to have something like that to intercept this behavior.

Regards

[Glideh]

Use case: I need to load some content on the slide only when it becomes visible (or close to be visible). The ideal would be to have a @change event as suggested by @leifriksheim, ex:

<carousel @change="changed">
  <slide>toto</slide>
  <slide>titi</slide>
  <slide>tata</slide>
</carousel>

//...
methods: {
  //...
  changed(page, event) {
    console.log('Carousel is showing the page:', page);
    console.log('Direction', event.direction);
    console.log('Previous slide index', event.previousSlideIndex);
    console.log('Change type', event.changeType); // touch|navigation|api
  },
},

Other events would be useful too:

• @slide-start
• @slide-end
• @loop (just cycled)

And maybe some events directly on a specific slide:

• @enter
• @leave