JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="infinite-carousel-shell">
  <div id="container" class="infinite-carousel-group">
    <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>
</div>

CSS

.infinite-carousel-shell {
  overflow: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.infinite-carousel-group {
  height: 100%;
}

.infinite-carousel-vertical {
  width: 100%;
}

.infinite-carousel-horizontal .infinite-carousel-group-item {
  float: left;
  height: 100%;
}

JavaScript

/*!
 * Infinite Carousel v0.1.0
 * Timed infinite carousel that uses vanilla JavaScript & CSS animations.
 *
 * @license Released under the MIT license.
 * @copyright 2015 Jon Chretien
 */

(function() {

  'use strict';

  /**
   * Vendor prefixes.
   * @type {Object}
   */
  var CSS_VENDOR_PREFIX = {
    TRANSFORM: {
      'transform': 'transform',
      'WebkitTransform': 'webkitTransform'
    },
    TRANSITION_END: {
      'transition': 'transitionend',
      'MSTransitionEnd': 'msTransitionEnd',
      'OTransition': 'oTransitionEnd',
      'WebkitTransition': 'webkitTransitionEnd'
    }
  };


  /**
   * Utility methods for carousel.
   * @type {Object}
   */
  var Utils = {
    /**
     * Merges two objects together.
     *
     * @param {Object} a - Object to merge into.
     * @param {Object} b - Object that gets copied over.
     * @returns {Object}
     * @api public
     */
    extend: function(a, b) {
      for (var key in b) {
        if (b.hasOwnProperty(key)) {
          a[key] = b[key];
        }
      }

      return a;
    },

    /**
     * Gets correct vendor prefix.
     * http://davidwalsh.name/css-animation-callback
     *
     * @param {Object} transitions - Dictionary of prefixed transitions.
     * @returns {String}
     * @api public
     */
    getVendorPrefix: function(transitions) {
      var el = document.createElement('div');

      for (var key in transitions) {
        if (transitions.hasOwnProperty(key)) {
          if (el.style[key] !== undefined) {
            return transitions[key];
          }
        }
      }
    },

    /**
     * Clones the first x nodes and appends them to a container.
     *
     * @param {Array} items - A list of items to clone.
     * @param {Number} number - The number of items to clone.
     * @param {Object} container - The container to append cloned nodes to.
     * @api public
     */
    cloneNodes: function(items, number, container) {
      var fragment = document.createDocumentFragment();

 ...