JSFiddle - React, Tailwind, and code Playground

by benhowdle89

HTML

<div class="infiniteCarousel" id="my-carousel">
    <div class="wrapper">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>

CSS

* {
			margin: 0;
			border: none;
			padding: 0;
			-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		}
		.infiniteCarousel {
			overflow: hidden;
			width: 400px;
		}
		.wrapper {
			height: 250px;
			width: 1600px;
		}
		.wrapper li {
		    width: 400px;
		    height: 250px;
		    background: red;
		    color: white;
		    border: 5px solid green;
		    float: left;
		}

JavaScript

var Halcyon = Halcyon || (function(win, doc) {

    var cache = {}, applyCSS,
    initialize = function(opts) {
        if (!opts.element) {
            throw new Error('You must provide a DOM element');
        }
        cache.element = opts.element;
        cache.easing = opts.easing || 'ease-in-out';
        cache.speed = opts.speed + 's' || '0.5s';
        cache.interval = opts.interval || 2000;

        var vendors = ['moz', 'webkit', 'o', 'ms'];

        applyCSS = function(opts) {
            switch (opts.rule) {
                case 'timing':
                    opts.el['style'].webkitTimingFunction = opts.value;
                    opts.el['style'].mozTimingFunction = opts.value;
                    opts.el['style'].msTimingFunction = opts.value;
                    opts.el['style'].oTimingFunction = opts.value;
                    opts.el['style'].timingFunction = opts.value;
                    break;
                case 'duration':
                    opts.el['style'].webkitTransitionDuration = opts.value;
                    opts.el['style'].mozTransitionDuration = opts.value;
                    opts.el['style'].oTransitionDuration = opts.value;
                    opts.el['style'].msTransitionDuration = opts.value;
                    opts.el['style'].transitionDuration = opts.value;
                    break;
                case 'transform':
                    opts.el['style'].webkitTransform = opts.value;
                    opts.el['style'].mozTransform = opts.value;
                    opts.el['style'].oTransform = opts.value;
                    opts.el['style'].msTransform = opts.value;
                    opts.el['style'].transform = opts.value;
                    break;
            }
        };

        var wrapper = cache.element.children[0],
            ul = wrapper.children[0],
            firstLI = ul.children[0];

        ul.appendChild(firstLI.cloneNode(true));

        cache.numSlides = ul.children.length;
       ...