About
Simple Carousel library written in vanilla JS, without any other dependencies!
Just remember to use required functions from API.
Recomended by
Working Demo
Link to working demo ( will add it soon ) - Demo.
The use example is below.
Usage
Install package by npm
npm install --save-dev papacarousel
Bundler
; // use with default options; // override default options
No Bundler
1 2 3
Styles
There are certain styles that are required. Check this file: Required Styles.
API
PapaCarousel has several options. To change any option, use the function presented below.
Options
-
getPapa()
Action: Initialize and start carousel
Required: true - important
Example: getPapa();
Note: Use this function as last one -
setParent()
Action: Setting new element as parent of Carousel
Default value: .papa-container
Argument type: string or HTMLElement
Required: false
Example: setParent('.my-class') -
setElements()
Action: Setting new elemenets as Carousel's items
Default value: .papa-item
Argument type: string or HTMLElement
Required: false
Example: setElements('.my-class') -
setButtons()
Action: Show navigation of Carousel
Default value: false
Argument options: true / false
Required: false
Example: setButtons(true) -
setProgressBar()
Action: Show progress bar
Default value: false
Argument options: true / false
Required: false
Example: setProgressBar(true) -
setTimePerSlide()
Action: Changes the time of switching the slides
Default value: 5000
Argument options: number in milliseconds
Required: false
Example: setTimePerSlide(2000) -
setTimingFn()
Action: Changes the duration of the animation
Default value: 250
Argument options: number in milliseconds
Required: false
Example: setTimingFn(150) -
setTransitionFn()
Action: Changes the animation function
Default value: ease-in
Argument options: ease, linear, ease-in, ease-out, ease-in-out
Required: false
Example: setTransitionFn('ease-in-out') -
setType()
Action: Changes the animation function
Default value: fading
Argument options: fading, slidingX, slidingY, more will come.. :)
Required: false
Example: setType('slidingX')
Remove Listeners
The library uses the listeners on elements that require it. If you want to stop carousels - use the function below.
Bundler
; ;
No Bundler
License
MIT License