Responsive Carousel Plugin In Vanilla JavaScript – papaCarousel

Category: Javascript , Slider | July 30, 2018
Views Total:1,439 views
Official Page:Go to website
Last Update:July 30, 2018


Responsive Carousel Plugin In Vanilla JavaScript – papaCarousel


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 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>

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
    // carousel item
    // shows navigation buttons
    // shows progress bar
    // transition delay
    // animation speed
    // transition effect
    // or 'fading', 'slidingY'
    // initialize the carousel

You Might Be Interested In:

Leave a Reply