0.1.3 • Published 5 years ago
@kalbrecht/carousel-vue v0.1.3
Carousel vue
This component is a simple carousel, inspired by the netflix's movies one. The carousel can be finite or looping endlessly in both ways.
Demo
(available soon)
Add to your project
npm i @kalbrecht/carousel-vue
Project setup from sources
npm install
npm run build && npm pack
/!\ Attention, the "bp" script use the windows command "move", switching to shelljs is in TODOs
Doc
Props
- items: the actual list of items to use in the carousel ( a complete list is needed for the moment ) you can use like the following :
<KalCarousel :items="myList">
<template v-slot:default="props">
{{props.item}}
</template>
</KalCarousel>
- title: A title you want to show (will be removed)
- chunkSize: The size of elements you want to show
- loop: let you decide if the carousel has to loop endlessly or stop when you reach the last chunk./!\ note that , by design, when the carousel is build it act as a "finite" carousel for the first action, so you have to scroll once at right for "activating" the loop. ( That will be a customization option later ).
- translationDuration: the time in miliseconds for the slide animation ( 700 by default )
Events
/!\ All those event will be reworked ( name and payload ).
- slide_left: when the user slide left, to see previous items. the payload represent as following
{
currentChunk:number,
directionLeft:boolean
}
- slide_right: when the user slide right, to see next items. The payload is the same as the slide_left.
- i_click: when the user click on an item, the payload is the current item.
Roadmap
- manage empty input
- allow lazy loading input
- portal for items
- add ShellJS for packaging command.
- customising arrows
- vue3
- add touch slide event
Todos
- reduce package size
- check SSR compatibility
- eternal refactoring