Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue tiny slider

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

Wrapper for Tiny slider component for Vue. You can use this to create a slide show or as a general slider.

Firefox 12+, Chrome 15+, Safari 4+, Opera 12.1+, IE8+

vue slider

Install

npm install vue-tiny-slider

Use

import VueTinySlider from 'vue-tiny-slider';

new Vue({
components: {
'tiny-slider': VueTinySlider
}
})
<tiny-slider :mouse-drag="true" :loop="false" items="2" gutter="20">
<div>Slider item #1</div>
<div>Slider item #2</div>
<div>Slider item #3</div>
<div>Slider item #4</div>
<div>Slider item #5</div>
<div>Slider item #6</div>
</tiny-slider>


### Styling

SCSS
@import 'tiny-slider/src/tiny-slider';
CDN
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.3.5/tiny-slider.css">


### Options

items
mode
gutter
edge-padding
fixed-width
slide-by
controls
controls-text
controls-container
nav
nav-container
arrow-keys
speed
autoplay
autoplay-timeout
autoplay-direction
autoplay-text
autoplay-hover-pause
autoplay-button
autoplay-button-output
autoplay-reset-on-visibility
animate-in
animate-out
animate-normal
animate-delay
loop
rewind
auto-height
responsive
lazyload
touch
mouse-drag
nested
freezable
disable
on-init

Methods

<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure>

Github: http://github.com/viktorlarsson/vue-tiny-slider#readme


← vue gravatar vue chartist →

© vuejsexamples.net - Privacy Policy - Cookie Policy