Neanderthal Pudding Mix

    vue-tiny-slider

    0.1.39 • Public • Published

    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+

    experimental downloads downloads per week version badge

    Table of Contents

    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="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css">

    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

    How to use the methods

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

    NuxtJS SSR

    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' }],
    1. 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.

    Todo

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

    Collaborators

    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

    Install

    npm i vue-tiny-slider

    DownloadsWeekly Downloads

    3,219

    Version

    0.1.39

    License

    MIT

    Unpacked Size

    52.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • mogge
    • viktorsarstrom