Wrapper for Tiny slider for all purposes by ganlanyuan in Vue. Try it out!

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

• Install
• Use
• Styling
• Options
• Methods
  • How to use the methods
• NuxtJS SSR
• Todos
• Collaborators
• License
• Cheerios <3

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.9.1/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 nav-options auto-width 

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).

1. yarn add vue-tiny-slider or npm install vue-tiny-slider

2. In nuxt.config.js add

plugins: [{ src: '~/plugins/vue-tiny-slider.js', mode: 'client' }],

3. Create the file plugins/vue-tiny-slider.js with this content

import Vue from 'vue' import vTinySlider from 'vue-tiny-slider' const VueTinySlider = { install(Vue, options) { Vue.component('VueTinySlider', vTinySlider) } } Vue.use(VueTinySlider)

Now you should be able to use it in any component without any import, like this:

<no-ssr> <vue-tiny-slider v-bind="tinySliderOptions"> <div>#1</div> <div>#2</div> <div>#3</div> <div>#4</div> <div>#5</div> <div>#6</div> </vue-tiny-slider> </no-ssr>

A demo is available here: https://codesandbox.io/s/jvjp349449.

• Add demo link from a fiddle or something similar
• Better handling of the responsive-settings
• Add Custom Events
• Add Methods

• Morgan Eklund
• Viktor Sarström

This project is available under the MIT license.

• Fixed broken demo link, @VitorLuizC
• Moved tiny-slider from devDependencies to dependencies, @TitanFighter
• Added nav position to props, @Irsanarisandy
• Got it to work with NuxtJS SSR, @ilbonte