thenoim / vue-keen-slider

Vue wrapper for keen-slider.io

vue-keen-slider

A vue wrapper for the keen slider library.

Usage

<template>
    <keen-slider arrow-color="black" loop navigation-arrows navigation-dots>
    	<keen-slide>1</keen-slide>
    	<keen-slide>2</keen-slide>
    	<keen-slide>3</keen-slide>
    	<keen-slide>4</keen-slide>
    </keen-slider>
</template>

Note: You need to import the css file:

import 'vue-keen-slider/dist/vue-keen-library.css'

All options of the keen slider library are accessible as vue prop.

This library also includes 5 additional props for more easy use:

1. navigation-arrows (boolean): Enables navigation arrows like in the "arrows and dots" example.
2. navigation-dots (boolean): Enables navigation dots like in the "arrows and dots" example.
3. arrow-color (css color string): Changes the color of the navigation arrow.
4. useParentScopeId (boolean): Use the css scope of the parent component. Useful for styling.
5. autoplay (boolean, string, number): Autoplay the slider. If you only pass true, the default value will be 3000ms. Autoplay is disabled by default. You need to pass the time in ms.

Further documentation: Component Docs

vue-keen-slider's Issues

No repository field in package.json

Adding

"repository": {
  "type": "git",
  "url": "https://github.com/TheNoim/vue-keen-slider.git"
}

to package.json should allow this GitHub page to be found from the NPM registry's page.

I can go ahead and do this in a PR for you, if you'd like.

Vue 2/3 hybrid

Make this library a Vue 2/3 hybrid library.