Carousel π
Dead simple carousel. Demo
Install
Clearly not ready for now, it will be a NPM module in few weeks, be patient.
Example
An example is disponible, you can try it but you'll need Gulp to customize.
Usage
It's (really) dead simple, actually (it'll change when it'll be on NPM) :
<script>
window.addEventListener('load', () => {
new Carousel(document.querySelector('#demo'), {
// Options
})
})
</script>
Carousel
Kind: global class
- Carousel
- new Carousel(el, options)
- .itemsToScroll β
number
- .itemsToShow β
number
- .wrapperWidth β
number
- .carouselWidth β
number
- .DOMSetup()
- .setStyles()
- .animation(active)
- .translate(percent)
- .setNavigation()
- .setPagination()
- .setDesktopPagination()
- .setMobilePagination()
- .navigate(to)
- .onResize()
- .onKeyUp(e)
- .onMove(callback)
- .goto(index, [animation])
- .wrapperTransitionEnd()
new Carousel(el, options)
Param | Type | Default | Description |
---|---|---|---|
el | HTMLElement |
Slider element | |
options | object |
Options object | |
[options.itemsToShow] | number |
1 |
How many element you want to show |
[options.itemsToShowOnMobile] | number |
1 |
How many element you want to show on mobile |
[options.itemsToScroll] | number |
1 |
How many items will be scrolling each time |
[options.itemsToScrollOnMobile] | number |
1 |
How many items will be scrolling each time on mobile |
[options.loop] | boolean |
false |
Loop and end of the slice |
[options.navigation] | boolean |
true |
Arrows to navigate in the slider |
[options.pagination] | boolean |
false |
Add pagination menu |
[options.mobilePagination] | boolean |
options.pagination |
Add pagination on mobile |
[options.infinite] | boolean |
false |
Infinite slider, you'll can't stop it :o |
number
carousel.itemsToScroll β itemsToScroll getter
Kind: instance property of Carousel
Returns: number
- return itemsToScroll
number
carousel.itemsToShow β itemsToShow getter
Kind: instance property of Carousel
Returns: number
- return itemsToShow
number
carousel.wrapperWidth β containerWidth getter
Kind: instance property of Carousel
Returns: number
- return the width of the container
number
carousel.carouselWidth β carouselWidth getter
Kind: instance property of Carousel
Returns: number
- return the width of the carousel root
carousel.DOMSetup()
DOMSetup - Setup the DOM to be ready
Kind: instance method of Carousel
carousel.setStyles()
setStyles - Set style for carousel items and wrapper
Kind: instance method of Carousel
carousel.animation(active)
animation - Enable or disable animation
Kind: instance method of Carousel
Param | Type | Description |
---|---|---|
active | boolean |
If you want to active the transition ability or not |
carousel.translate(percent)
translate - Translate the wrapper to slide
Kind: instance method of Carousel
Param | Type | Description |
---|---|---|
percent | number |
How many percent you want to slide |
carousel.setNavigation()
setNavigation - Create navigation components to scroll in the carousel
Kind: instance method of Carousel
carousel.setPagination()
setPagination - Init the pagination following the options
Kind: instance method of Carousel
carousel.setDesktopPagination()
setDesktopPagination - Create pagination components (dots) on desktop
Kind: instance method of Carousel
carousel.setMobilePagination()
setMobilePagination - Create pagination components (dots) on mobile
Kind: instance method of Carousel
carousel.navigate(to)
navigate - Scroll in the slider to navigate
Kind: instance method of Carousel
Param | Type | Description |
---|---|---|
to | string |
direction of navigation |
carousel.onResize()
onResize - Event window resize
Kind: instance method of Carousel
carousel.onKeyUp(e)
onKeyUp - Event on keyUp on root
Kind: instance method of Carousel
Param | Type | Description |
---|---|---|
e | type |
event |
carousel.onMove(callback)
onMove - store new callback
Kind: instance method of Carousel
Param | Type | Description |
---|---|---|
callback | moveCallback |
index callback |
carousel.goto(index, [animation])
goto - Scroll in the slider to navigate
Kind: instance method of Carousel
Param | Type | Default | Description |
---|---|---|---|
index | number |
Slide number | |
[animation] | boolean |
true |
Animate the translation |
carousel.wrapperTransitionEnd()
wrapperTransitionEnd - Toggled on transition end
Kind: instance method of Carousel
CarouselTouch
Add touchable
Kind: global class
new CarouselTouch(carousel)
Param | Type |
---|---|
carousel | Carousel |
carouselTouch.startDrag(e)
startDrag - Draggable start
Kind: instance method of CarouselTouch
Param | Type |
---|---|
e | MouseEvent | TouchEvent |
carouselTouch.drag(e)
drag - Mouse or finger is moving
Kind: instance method of CarouselTouch
Param | Type |
---|---|
e | MouseEvent | TouchEvent |
carouselTouch.endDrag(e)
endDrag - Draggable end
Kind: instance method of CarouselTouch
Param | Type |
---|---|
e | MouseEvent | TouchEvent |
function
moveCallback : Kind: global typedef
Param | Type |
---|---|
index | number |
Classes
- Carousel
- CarouselTouch
Add touchable
Typedefs
- moveCallback :
function