tiny-slider 2.0 for Vue

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

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

   

Table of Contents

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

Install

npm install vue-tiny-slider

Use

```javascript
import VueTinySlider from 'vue-tiny-slider';

new Vue({
components: {
'tiny-slider': VueTinySlider
}
})
``

``html



Slider item #2

Slider item #3

Slider item #4

Slider item #5

Slider item #6

``

Styling

SCSS
``scss
@import 'tiny-slider/src/tiny-slider';
``

CDN
``html

``

Options

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

Methods

``getInfo``
``goTo``
``destroy``

$3

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.

`

`

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

NuxtJS SSR

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

2. In nuxt.config.js add
` js
plugins: [{ src: '~/plugins/vue-tiny-slider.js', mode: 'client' }],
`

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

`js
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:

`js




#2

#3

#4

#5

#6

``

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

Todo

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

Collaborators

* Morgan Eklund
* Viktor Sarström

License

This project is available under the MIT license.

Cheerios <3

* 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