JSFiddle - React, Tailwind, and code Playground

by design48

HTML

<script src="http://design48.net/i/zepto-carousel.js"></script>
<ul id="my-carousel">
<li><img src="http://lorempixel.com/400/200/technics/2" /></li>
<li><img src="http://lorempixel.com/400/200/technics/5" /></li>
<li><img src="http://lorempixel.com/400/200/technics/9" /></li>
</ul>

CSS

#my-carousel { 
    height: 200px; 
    width: 400px;
    margin: 20px;
    overflow: none;
    position: relative;
}

#my-carousel li { 
    display: inline;
    float: left;
    left:0;
    /* uses Zepto's animate function with opacity, so set to 0 for initial page load */
    opacity: 0;  
    position: absolute;
    top: 0;
}

JavaScript

$(document).ready(function() {
   $('#my-carousel').carousel(); 
});