papacarousel v1.1.5
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
import { PapaFascade } from 'papacarousel';
// use with default options
new PapaFascade().getPapa();
// override default options
new PapaFascade()
.setParent('.papa-container')
.setElements('.papa-item')
.setButtons(true)
.setProgressBar(true)
.setTimePerSlide(5000)
.setTimingFn(300)
.setTransitionFn('linear')
.setType('slidingX')
.getPapa()
No Bundler
<html>
<head></head>
<body>
<div class="papa-container">
<div class="papa-item">1</div>
<div class="papa-item">2</div>
<div class="papa-item">3</div>
</div>
</body>
<script src="node_modules/papacarousel/bundles/papacarousel.min.umd.js"></script>
<script>
// use with default options
new Papacarousel.PapaFascade().getPapa();
// override default options
new Papacarousel.PapaFascade()
.setParent('.papa-container')
.setElements('.papa-item')
.setButtons(true)
.setProgressBar(true)
.setTimePerSlide(5000)
.setTimingFn(300)
.setTransitionFn('linear')
.setType('slidingX')
.getPapa();
</script>
</html>
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 onesetParent()
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
import { PapaFascade } from 'papacarousel';
new PapaFascade().destroyListeners();
No Bundler
<script src="node_modules/papacarousel/bundles/papacarousel.min.umd.js"></script>
<script>
new Papacarousel.PapaFascade().destroyListeners();
</script>
License
MIT License