Content Slider

GITHUB

This is slider component.


Code:

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

Examples:


XX

Julia Edwards

XX

Glen Peters

XX

Bertine Heggestad

XX

Chloe Andersen

XX

Roman White


API:

NameTypeDefaultDescription
value*
---
0
Selected slide index.
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.
swipeSupport (added from 2.3.0)
Boolean
true
Allow user to swipe slides.
slidesPerPage (added from 2.4.0)
Number
1
Number of visible slides per view.
interval
Number
0
Miliseconds time to automatic change the value key. If it's 0, it does not apply.
NameParamsDescription
input
newSelectedSlide
Fired when component request to change value.
NameParamsDescription
tab
index and selected
Field tab buttons template. slide param equal to slot (slide) names.
tab-${index}
selected
Unique slide tab button template.
NameDescription
.fv-size-xs
XSmall size
.fv-size-sm
Small size
.fv-size-md
Medium size (actived by default)
.fv-size-lg
Large size
.fv-size-xl
XLarge size