0.1.3 • Published 5 years ago

@kalbrecht/carousel-vue v0.1.3

Weekly downloads
1
License
ISC
Repository
github
Last release
5 years ago

Carousel vue

npm.io

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
0.1.2

5 years ago

0.1.3

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago