MultiCarousel

A dependency free multiple item JavaScript carousel.

Installation

Install with NPM:

npm install multicarousel

Demo

Check it out: https://sciactive.github.io/multicarousel/demo/

Use

Use the IIFE file in the dist directory or the ES module in the lib directory.

When you instantiate, pass an array of DOM elements as the items prop. Like this:

const container = document.getElementById('MyCarousel');
const carousel = new MultiCarousel({
  target: container,
  props: {
    items: [...container.children],
    // The rest of these are optional. Here are the defaults.
    delay: 1500, // Delay between slides.
    transition: 600, // Duration of slide transition.
    count: 5, // How many items to show at once.
    controls: [ // Which controls are visible.
      'previous',
      'next',
      'pause',
      'start'
    ]
  }
});

// Programmatic slide triggering.
carousel.previous();
carousel.next();

// Stop and start the carousel.
carousel.pause();
carousel.start();

Made with Svelte

It's made with Svelte.

Icon Credits

Icons were provided by Font Awesome and Font-Awesome-SVG-PNG.

Multicarousel

A dependency free multiple item JavaScript carousel.

Multicarousel Info

⭐ Stars 31
🔗 Homepage sciactive.github.io
🔗 Source Code github.com
🕒 Last Update a year ago
🕒 Created 4 years ago
🐞 Open Issues 2
➗ Star-Issue Ratio 16
😎 Author sciactive