Responsive Infinite Image Scroller – Carousel.js

Preview:

Description:

A tiny, modern, and responsive carousel JavaScript library that allows to loop infinitely over images by clicking next or previous arrows.

More Features:

• Image loader.
• Custom title & subtitle.
• Fetch image data from JSON.
• 4 image card types.

How to use it:

1. Import the Carousel.js.

import Carousel from './js/carousel.js';
import './scss/carousel.scss';

2. Or import the JavaScript and CSS files into the document.

<link rel="stylesheet" href="css/carousel.min.css" />
<script src="js/carousel.min.js"></script>

3. Prepare your image data as follows:

const myData =
[
  {
    "image": "1.jpg",
    "type": "video",
    "duration": 76,
    "title": "Image Title",
    "cardinality": "single"
  },
  {
    "image": "2.jpg",
    "type": "elearning",
    "duration": 2520,
    "title": "Image Title",
    "cardinality": "single"
  },
  {
    "image": "3.jpg",
    "type": "learning_plan",
    "duration": 4800,
    "title": "Image Title",
    "cardinality": "collection"
  },
  {
    "image": "4.jpg",
    "type": "playlist",
    "duration": 4800,
    "title": "Image Title",
    "cardinality": "collection"
  }
];

4. Generate a basic carousel on the page.

<div id="myCarousel"></div>

const myCarousel = new Carousel({
      container: 'myCarousel',
      title: 'Carousel Title',
      subtitle: 'Sub Title',
      fetchCards: (chunkSize) => {
        const itemLimit = chunkSize || Math.ceil(Math.random() * 6);
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(myData.slice(0, itemLimit));
          }, 1000);
        });
      }
});

5. Customize the images & cards.

const myCarousel = new Carousel({
      // icon shown in the header
      // requires material icons
      icon: 'tungsten',
      // card width
      cardWidth: 200,
      // space between cards
      cardGutter: 10,
      // card height
      cardHeight: 240,
      // image height
      imgHeight: 100,
      // container selector
      containerSelector: 'container'
      
});