https://github.com/thenoim/vue-keen-slider
Vue wrapper for keen-slider.io
https://github.com/thenoim/vue-keen-slider
autoplay hacktoberfest keen-slider keen-slider-library slider vue vuejs
Last synced: 7 months ago
JSON representation
Vue wrapper for keen-slider.io
- Host: GitHub
- URL: https://github.com/thenoim/vue-keen-slider
- Owner: TheNoim
- Created: 2020-06-20T13:16:52.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T02:26:47.000Z (over 2 years ago)
- Last Synced: 2025-03-08T15:49:30.629Z (7 months ago)
- Topics: autoplay, hacktoberfest, keen-slider, keen-slider-library, slider, vue, vuejs
- Language: Vue
- Homepage:
- Size: 449 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-keen-slider
A vue wrapper for the [keen slider library](https://github.com/rcbyr/keen-slider).
## Usage
```vue
1
2
3
4
```
*Note*: You need to import the css file:
```javascript
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](https://keen-slider.io/examples/#navigation).
2. `navigation-dots` (boolean): Enables navigation dots like in the ["arrows and dots" example](https://keen-slider.io/examples/#navigation).
2. `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](https://github.com/TheNoim/vue-keen-slider/tree/master/docs/KeenSlider.md)