Click handler inside a slide about vueper-slides HOT 5 CLOSED

@antoniandre Thanks for your help, we have implemented the "complex slide solution" and it works well for our use case.

from vueper-slides.

@matejmachac,
Are you trying to use one of the available events https://antoniandre.github.io/vueper-slides/#events only for one particular slide?
Or are trying to bind a click event on one particular slide?
Also what do you want to do in that click handler?

If what you want is trigger an action every time user slides to slide #3 for instance, you can use before-slide or slide and use the available params to check the slide index (refer to https://antoniandre.github.io/vueper-slides/#ex--events):

Event: "before-slide",
Params: {
  "currentSlide":{"index":0,"title":"1","titleSlot":null,"content":"","contentSlot":null,"image":""},
  "nextSlide":{"index":1,"title":"2","titleSlot":null,"content":"","contentSlot":null,"image":""}
}

Event: "slide",
Params: {
  "currentSlide":{"index":1,"title":"2","titleSlot":null,"content":"","contentSlot":null,"image":""}
}

So in the event handler you can check the current slide.index (if slide event) or nextSlide.index (if before-slide event):

if (slide.index === 3) {
  // Do sth only for slide #3.
}

from vueper-slides.

Hi @antoniandre,
we need to have either a vue router link, or a div with a click handler as the content of the slides (also we are using the background image option). Is there a way to do this?

from vueper-slides.

You can place a router link in any slide by using the provided slots: https://antoniandre.github.io/vueper-slides/#ex--complex-slide-title-and-content.
another example here: https://antoniandre.github.io/vueper-slides/#ex--updating-content.

Then if you need to make the entire slide clickable you can position it absolute in CSS for instance.

from vueper-slides.

@antoniandre we will try to implement this, thanks. Doesn't this create a potential problem with touch swiping on mobile, though (clickable div covering the entire slide)?

from vueper-slides.