This is a module that I built originally to solve many of the headaches and complexities around building flexible and scalable carousels.
This library has been used and adopted on many projects, including:
You can install as an npm package if using a build system like Browserify.
npm install carousel-js --save-dev
You can create a carousel based off of a set of predetermined markup. Assuming you have the appropriate elements already in the DOM and have your CSS set up correctly to show and hide the styles. You can setup Carousel and navigate to panels programmatically.
var carousel =panels: document;carousel; // go to second carousel panel
Carousel with Clickable Thumbnails
Create a carousel with thumbnails based off of a set of predetermined markup. Assuming, you have your html in the DOM and CSS set up correctly. You can use the Carousel class to add interactivity:
var thumbnails = document;var carousel =panels: documentthumbnails: thumbnails;// click on second thumbnail to show second panelthumbnails1;
More details and example can be found here.
Carousel Image Lazy Loading
The carousel class also allows lazy loading images so that you can ensure that large image assets only load when transitioning to the panel they reside in. This saves us from hogging the user's bandwidth and downloading all image assets before a user navigates to it. To use the lazy loading functionality, let's assume you have the following in the DOM already:
Then you can do this:
var carousel =panels: documentpanelActiveClass: 'carousel-panel-active'lazyLoadAttr: 'data-lazy-src'assetLoadingClass: 'image-loading';// go to second panel and lazy load the image it containscarousel;
A more in-depth, working example of Carousel's lazy loading can be found here.
Carousel with Arrows
You can easily create a carousel with the traditional left and right arrows. Assuming you have the following markup and styles in the DOM, you can do something like this:
var leftArrowElement = document0;var rightArrowElement = document0;var carousel =panels: documentleftArrow: leftArrowElementrightArrow: rightArrowElementarrowDisabledClass: 'arrow-disabled';// go to first panel which will add a css class on the left arrow to disable itcarousel;// click right arrow to navigate to next panel// which will remove the disabled css class from the left arrowrightArrowElement;