Simple Carousel library written in vanilla JS, without any other dependencies!
Just remember to use required functions from API.
Recomended by
Link to working demo ( will add it soon ) - Demo.
The use example is below.
Install package by npm
npm install --save-dev papacarousel
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() <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>There are certain styles that are required. Check this file: Required Styles.
PapaCarousel has several options. To change any option, use the function presented below.
-
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')
The library uses the listeners on elements that require it. If you want to stop carousels - use the function below.
import { PapaFascade } from 'papacarousel';
new PapaFascade().destroyListeners();<script src="node_modules/papacarousel/bundles/papacarousel.min.umd.js"></script>
<script>
new Papacarousel.PapaFascade().destroyListeners();
</script>MIT License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent