Responsive Carousel Plugin In Vanilla JavaScript – papaCarousel

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();