How to use Events in vue-Carousel?

user_10321202 0
Viewed 2317

I would like to navigate in my carousel using functions in methods.

I'm using this vue-carousel

vue-carousel

They wrote in docs about events to navigate but i don't know how to use that. Any orientation ? Thank you!

Exemple : 

methods: {
    GoToPage5:function(){
      //use Carousel events here    
    },
carousel vue.js
2 Answers

As with any custom Vue component, you can bind event listeners using either the v-on, or the @ shorthand:

<carousel @navigation-click="navigationHandler">

then in your Vue configuration, you provide the handler method:

{
  ...,

  methods: {
    navigationHandler(direction) {
      // direction = "backward" or "forward"
    }
  },
  
  ...
}

You can use the same convention to listen to any of the package's custom events.

UPDATE:

Since you're looking to make use of the :navigate-to property, you'll need to do the following:

  1. Bind to the property correctly – using kebab-case rather than camel-case:
<carousel :navigate-to="manualNavigation">
  1. Create the manualNavigation data property:
{
  data() {
    return {
      ...
      manualNavigation: 5,
      ...
    }
  }
}
  1. Manually update the manualNavigation property:
{
  ...
  methods: {
    GoToPage5() {
      this.manualNavigation = 5;
    },
  }
}

Now, any time you call GoToPage5(), the carousel should respond by animating to your 5 slide.

user_31094730

:navigate-to="2" seems not working in vue-carousel.

this code works.

         this.$refs.carousel.goToPage(2);
user_103212020
Related