Author: | zgrybus |
---|---|
Views Total: | 1,457 views |
Official Page: | Go to website |
Last Update: | July 30, 2018 |
License: | MIT |
Preview:

Description:
papaCarousel is a dependency-free vanilla JavaScript plugin to create a fully responsive and highly customizable carousel for any web contents.
More features:
- A Progress bar to indicate how many time left the carousel transitions to next slide.
- Navigation buttons.
- Custom transition delay and animation speed.
- Fade and Horizontal/Vertical scroll animations.
How to use it:
Add references to the papaCarousel’s JavaScript and CSS files.
<link rel="stylesheet" href="papaCarousel.css"> <script src="papacarousel.min.umd.js"></script>
Or install & import the papaCarousel as a module.
# Yarn $ yarn add papacarousel # NPM $ npm install papacarousel --save
import { PapaFascade } from 'papacarousel';
Add slides to the carousel following the html structure like these:
<div class="papa-container"> <div class="papa-item">1</div> <div class="papa-item">2</div> <div class="papa-item">3</div> <div class="papa-item">4</div> <div class="papa-item">5</div> ... </div>
Initialize the papaCarousel to create a default carousel.
new PapaFascade().getPapa();
Customize the carousel by overriding the following options in the chained methods.
new Papacarousel.PapaFascade() // parent container .setParent('.papa-container') // carousel item .setElements('.papa-item') // shows navigation buttons .setButtons(true) // shows progress bar .setProgressBar(true) // transition delay .setTimePerSlide(5000) // animation speed .setTimingFn(300) // transition effect .setTransitionFn('linear') // or 'fading', 'slidingY' .setType('slidingX') // initialize the carousel .getPapa();