slider.mood

Slider.mood

Vue.js slider component

Installing

# npm
npm i --save slider.mood

# yarn
yarn add slider.mood

Usage

Overall use

import Vue from 'vue';
import Slider from 'slider.mood';

// You can change the name of the component if you wish
Vue.use(Slider, {name: 'Slider'});

Single file

<script lang="js">
import Slider from "slider.mood";

export default {
  components: {
    Slider
  }
}
</script>

In your vue.js file

After that you can use the component in your code as follows.

<template>
  <div id="app">
    <slider>
       <div class="my-slider-one">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi
          voluptatem quod ea, provident expedita eius veniam hic nostrum
          dolorem. Consequuntur impedit animi in illum totam beatae culpa nobis
          eveniet alias?
        </div>
        <div class="my-slider-two">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi
          voluptatem quod ea, provident expedita eius veniam hic nostrum
          dolorem. Consequuntur impedit animi in illum totam beatae culpa nobis
          eveniet alias?
        </div>
        <div class="my-slider-three">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi
          voluptatem quod ea, provident expedita eius veniam hic nostrum
          dolorem. Consequuntur impedit animi in illum totam beatae culpa nobis
          eveniet alias?
        </div>
    </slider>
  </div>
</template>

Props

pause

• type: boolean
• requred: false
• default: false

pauseOnHover

• type: boolean
• requred: false
• default: false

slideOnTouch

the component will be slide with touchEnvent

• type: boolean
• requred: false
• default: true

slideOnKeyboard

the component will be slide with keyboardEnvent

• type: boolean
• requred: false
• default: true

slideOnMouse

the component will be slide with mouseEnvent

• type: boolean
• requred: false
• default: true

autoplay

• type: boolean
• requred: false
• default: false

duration

• type: number
• requred: false
• default: 200

infinite

• type: boolean
• requred: false
• default: false

visibleSlide

the number of slides to display

• type: number
• requred: false
• default: 1

stratSlide

• type: number
• requred: false
• default: 0

Functions

slideTo

<script>
export default {

  methods: {
    // ...

    slideTo() {
      const slider = this.$refs.slider;
      slider.slideTo(3);
    }
  }
}
</script>

next

Slide to next slide

<script>
export default {

  methods: {
    // ...

    slideTo() {
      const slider = this.$refs.slider;
      slider.next();
    }
  }
}
</script>

prev

Slide to prevent slide

<script>
export default {

  methods: {
    // ...

    slideTo() {
      const slider = this.$refs.slider;
      slider.prev();
    }
  }
}
</script>

Author

@domutala

License

MIT