Responsive Infinite Image Scroller – Carousel.js

Category: Javascript , Slider | May 25, 2021
Author: pasor1
Views Total: 411 views
Official Page: Go to website
Last Update: May 25, 2021
License: MIT

Preview:

Responsive Infinite Image Scroller –  Carousel.js

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'
      
});

You Might Be Interested In:


Leave a Reply