Timed Infinite Carousel With Vanilla JavaScript and CSS3

Category: Javascript , Slider | October 24, 2020
Views Total:1,365 views
Official Page:Go to website
Last Update:October 24, 2020


Timed Infinite Carousel With Vanilla JavaScript and CSS3


Timed infinite carousel that uses vanilla JavaScript & CSS animations. It supports both horizontal and vertical scrolling. It’s useful if you need a UI element to continuously scroll (ex: ticker being displayed on a TV monitor).

How to use it:

Import the infinite-carousel.js in the document.

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

Add slide items 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 class="infinite-carousel-group-item">7</div>
    <div class="infinite-carousel-group-item">8</div>
    <div class="infinite-carousel-group-item">9</div>
    <div class="infinite-carousel-group-item">10</div>
    <div class="infinite-carousel-group-item">11</div>

Initialize the carousel.

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


 * 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


v0.2.1 (10/24/2020)

  • refactor

You Might Be Interested In:

3 thoughts on “Timed Infinite Carousel With Vanilla JavaScript and CSS3

  1. FullSpeedAhead

    Is it possible to configure this to respond to directional arrows rather than a timed scroll?

  2. Humphrey Pietersen

    this is slightly flawed but nontheless a great one for a lesson 😀


Leave a Reply