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

carousel.itemsToScroll ⇒ number

itemsToScroll getter

Kind: instance property of Carousel
Returns: number - return itemsToScroll

carousel.itemsToShow ⇒ number

itemsToShow getter

Kind: instance property of Carousel
Returns: number - return itemsToShow

carousel.wrapperWidth ⇒ number

containerWidth getter

Kind: instance property of Carousel
Returns: number - return the width of the container

carousel.carouselWidth ⇒ number

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

• CarouselTouch
  • new CarouselTouch(carousel)
  • .startDrag(e)
  • .drag(e)
  • .endDrag(e)

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

moveCallback : function

Kind: global typedef

Param	Type
index	number

Classes

Carousel

CarouselTouch

Add touchable

Typedefs

moveCallback : function