REVOLV

REVOLV is a very simple carousel object. Each instance takes in an array of objects containing carousel data, as well as a node with the revolv class. The Revolv object will use predefined CSS classes to initialize and populate each carousel. Styles are not included in this package, as I wanted the developer to have as much control over the look and feel as possible.

Please take a look at Revolv on Github & npm.

npm install --save revolv

Simply install to dependencies, import into a project, and begin.


import './css/main.css';
import Revolv from 'revolv';

Revolv will look for several CSS classes in order to populate each carousel– revolv, revolv-node-container, revolv-caption, revolv-anchor, revolv-previous, and revolv-next.

revolv is a required class. It must contain all of your revolv classes in order for the carousel to function properly.

revolv-node-container is another required class. It will house your clickable image nodes that represent each image in the carousel.

revolv-caption will contain your caption.

revolv-anchor is the image link. The href will change with each new image.

revolv-previous and revolv-next are your previous/next image buttons.

Just to recap, revolv and revolv-node-container are the only required classes you'll need to use. The rest exist for more functionality.


Each instance of REVOLV requires a node and an object as parameters. For example, the two instances of REVOLV on this page are instantiated with the following code–

import Revolv from 'revolv';
import collection from '/lib/collection'
const  len = collection.length;
const  nodes = [...document.querySelectorAll('.revolv')];

for (let i = 0, len = collection.length; i < len; i++) {
  new Revolv(collection[i], nodes[i]);
};

The revolv object is imported from node_modules, and collection is my array of objects which can be seen here.


Here's an example of a very simple carousel built with Revolv.

Minimal

Simple and fairly elegant. The styles here are not included in the package, but styling is easy because Carousel is based on CSS classes rather than component structures like React or Angular elements may be.

Bells and Whistles

To view the HTML/CSS of the previous examples, head here.

Follow the links below for more information about me and my projects or head to my website. If you find an issue, please report it to Carousel's GitHub issues.