@vjee/pompom v1.0.1

Pompom

NOTE: Pompom was written because I personally needed this feature.

I made this open source so other people might use it or build upon it.

Because of this, Pompom might has some "rough edges".

Pompom is an infinite carousel that animates the horizontal position of its elements as well as the scale and vertical position.

Table of contents:

• Browser support
• How it works
• Gotchas
• Installation
• Usage
• Configuration

Browser support

How it works

Pompom only renders the DOM needed to display what is visibile on the screen at any given moment. For this you provide your own function that created the DOM you want for each carousel item/card. As wel as a "create" function, a "update" function is needed to update a card with new data.

Each time you call the "next" or "prev" method on Pompom's Carousel instance the carousel's cards/items are animated to their new position and new scale. This is done using a bezier curve you provide or the default on defined by Pompom.

Pompom uses bezier-easing to calculate each step of the animation.

Gotchas

1. The amount of visible cards always needs to be odd. This way there is a centre card/item. Eg: 1, 3, 5, 7
2. If you want to display 7 carousel cards/items on the screen, you'll need data for 9 or more cards (visible +2)
3. The first position for the first card needs to be placed outside of the bounds of the carousel. This is so Pompom knows where to animate cards/items to when they leave the sceen or come in from the side of the screen.

Installation

Add the Pompom to your project with Yarn:

yarn add @vgesteljasper/pompom

or npm:

npm install @vgesteljasper/pompom

Usage

Importing

import { Carousel, createCard } from "@vgesteljasper/pompom"

// Carousel     -> The Pompom carousel class used to instantiate a new carousel
// createCard   -> Helper function to create a Card class with your own DOM structure

Creating custom Card

To instantiate a new Pompom carousel we will need a Pompom Card class. This class will be used to render and update each carousel card/item.

Use createCard to easilly create a class with your desired DOM structure.

import { createCard } from "@vgesteljasper/pompom"

const Card = createCard(
  // create function
  data => { // `data` is the data passed to Pompom (see further on in documentation)
    const el = document.createElement("div")
    el.textContent = data.text

    return el
  },

  // update function
  (el, data) => { // `el` is the carousel card node, `data` is the data passed to Pompom
    el.textContent = data.text
  }
)

Creating the carousel

Pompom's Carousel class accepts a settings object as first argument and a options object as it's second argument.

The options object is not required whereas the settings object is optional.

Seee Configuration for more details.

import { Carousel } from "@vgesteljasper/pompom"

const Card = /* See Usage > Creating custom Card */

const settings = {};
const options = {};

const carousel = new Carousel(settings, options)

Configuration

settings

Parameter 1 of new Carousel()

All the properties listed below are required for Pompom to work.

Options

Parameter 2 of new Carousel()

These options are like the name suggests optional and all have a default value.