vue-tiny-slider

Table of Contents

• Installation
• Usage
• Demo
• Development

Installation

npm install @mentorkadriu/vue-tiny-slider

Usage

More usage options can be found in the:

• Full demos
• /src/demos.
• stackblitz.com

1<script>
2  import { ref, onMounted } from "vue";
3  import VueTinySlider from "@mentorkadriu/vue-tiny-slider";
4
5  export default {
6  name: "App",
7  components: { VueTinySlider },
8  setup() {
9    // Optional: Create a ref to hold the slider value
10    const slider = ref(null);
11    
12    // https://github.com/ganlanyuan/tiny-slider#options
13    const options = {
14      items: 3,
15      speed: 400
16    }
17    onMounted(() => {
18      // Get slider instance
19      console.log(slider.value.getSlider());
20    });
21
22
23    function onIndexChange(info) {
24      console.log(info);
25    }
26    
27    return {
28      onIndexChange,
29      options,
30      slider,
31    };
32  },
33};
34</script>
35
36<template>
37  <VueTinySlider :options="options" ref="slider" @indexChanged="onIndexChange">
38    <div>Slide #1</div>
39    <div>Slide #2</div>
40    <div>Slide #3</div>
41  </VueTinySlider>
42</template>

Development

Setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build-lib