Next/Previous Arrow Control

[tylerwiegand]

JUST IN CASE anyone is about to spent too much time looking (like I did) for support for the previous and next arrows, look no further than the Workbench.vue file in the vue-glide-js folder. Inside your vue-glide component just paste that bad boy in there and you got your buttons.

<vue-glide>
   <vue-glide-slide>
      content here
   </vue-glide-slide>
   <template slot="control">
      <button data-glide-dir="<">prev</button>
      <button data-glide-dir=">">next</button>
   </template>
</vue-glide

[tyler-morales]

@tylerwiegand How can you both of the buttons as a whole? I've tried wrapping the two buttons inside one div and use a class on that, but then the button functionally breaks down. Essentially, what I'm trying to accomplish is centering the buttons in the middle of my slider. Currently they are up against the left edge of the glide container.

[josegus]

@tylerwiegand How can you both of the buttons as a whole? I've tried wrapping the two buttons inside one div and use a class on that, but then the button functionally breaks down. Essentially, what I'm trying to accomplish is centering the buttons in the middle of my slider. Currently they are up against the left edge of the glide container.

I did it:

Don't forget to use default css, so the slider wont break '~vue-glide-js/dist/vue-glide.css';

[tyler-morales]

@josegus I tried what you did, but the buttons aren't functional. Have you checked their functionality?

[josegus]

@josegus I tried what you did, but the buttons aren't functional. Have you checked their functionality?

yes, I tried, it worked for me.

I'm just wrapping the control slot with a custom div, it should be enough to make it customizable

[antonreshetov]

@tylerwiegand https://antonreshetov.github.io/vue-glide/slots/#control