[Infinite] A Carousel Slideshow That Uses Vanilla JavaScript and CSS | Continuous Slider

Timed continuous carousel rack using Vanilla JavaScript & CSS animation. It supports horizontal and vertical scrolling. It’s useful if you need a widget to scroll constantly.

How to make use of it:

Import the infinite-carousel.js within the doc.

<script src="dist/infinite-carousel.js"></script>

Add slide objects into the carousel.

<div class="infinite-carousel-shell">
  <div id="container" class="infinite-carousel-group infinite-carousel-horizontal">
    <div class="infinite-carousel-group-item">1</div>
    <div class="infinite-carousel-group-item">2</div>
    <div class="infinite-carousel-group-item">3</div>
    <div class="infinite-carousel-group-item">4</div>
    <div class="infinite-carousel-group-item">5</div>
    <div class="infinite-carousel-group-item">6</div>
  </div>
</div>

Initialize the carousel.

var infinitecarousel = new InfiniteCarousel('#container', 'horizontal', 6);

Parameters.

/**
 * Required arguments are:
 * - a container element (string)
 * - a direction ('horizontal' or 'vertical')
 * - the number of items that are visible at once
 */
var infinitecarousel = new InfiniteCarousel('#container', 'horizontal', 3, {
  // optional options object (defaults are listed)

  timerDuration: 2000,
  // set time between advances in milliseconds

  transitionDuration: '1s'
  // the duration of the animation
});

Timed Infinite Carousel With Vanilla JavaScript, Continuous Carousel ∞ Plugin/Github

Infinite-Continuous-Carousel-Demo


See Demo And Download

Official Website(jonchretien): Click Here

This superior jQuery/javascript plugin is developed by jonchretien. For extra Advanced usage, please go to the official website.

Share