Content Slider

GITHUB

This is slider component.


Code:

  
HTML
<fvSlider v-model="slider"> <div slot="slide-One"> <!-- Slide One Content --> </div> <div slot="slide-Two"> <!-- Slide Two Content --> </div> </fvSlider>
  
Javascript
export default { data () { return { slider: 'One' } } }

Examples:

Content of one

Tab One

Hello Dear ;)


XX

Lee Myers

4744 Crescent Canyon St



Notes:

  • fvSlider consider slots with slide- name starts as slide and text after that is slide name
  • If value prop is undefined at start, fvSlider will fire input event with first slide value.
  • If you want to get your custom object for button slot, you can use value as key and handle target object outside of fvSlider.

API:

NameTypeDefaultDescription
value*
---
---
Selected slide (slot) name. (without slide- prefix)
showTabs
Boolean
true
Show tab buttons on top of slider.
showNavs
Boolean
false
Show navigation buttons on bottom of slider.
showButtons
Boolean
false
Show next/prev buttons on next to slider.
interval
Number
0
Miliseconds time to automatic change the value key. If it's 0, it does not apply.