Responsive Carousel Plugin In Vanilla JavaScript – papaCarousel

Category: Javascript , Slider | July 30, 2018
Author: zgrybus
Views Total: 1,066
Official Page: Go to website
Last Update: July 30, 2018
License: MIT

Preview:

Responsive Carousel Plugin In Vanilla JavaScript – papaCarousel

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

You Might Be Interested In:


Leave a Reply