Wrapper for Tiny slider for all purposes by ganlanyuan in Vue. Try it out!
Firefox 12+, Chrome 15+, Safari 4+, Opera 12.1+, IE8+
npm install vue-tiny-slider
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>SCSS
@import 'tiny-slider/src/tiny-slider';CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.3.5/tiny-slider.css">auto-init
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
center
lazy-load-selector
prevent-action-when-running
prevent-scroll-on-touch
For more detailed information about the options, see the Tiny-slider documentation (Options).
getInfo
goTo
destroy
To be able to use the methods, you need to use ref on the component. Ref is used to register a reference to an element or a child component.
<vue-tiny-slider ref="tinySlider"></vue-tiny-slider>
import VueTinySlider from 'vue-tiny-slider';
export default {
...,
methods: {
getInfo: function(event) {
this.$refs.tinySlider.slider.getInfo();
}
}
}
For more detailed information about the methods, see the Tiny-slider documentation (Methods).
Add demo link from a fiddle or something similar- Better handling of the responsive-settings
- Add Custom Events
Add Methods
This project is available under the MIT license.
- Fixed broken demo link, @VitorLuizC
- Moved tiny-slider from devDependencies to dependencies, @TitanFighter
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent