JSFiddle - React, Tailwind, and code Playground

by James Doyle

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div id="content" class="pics" style="position: relative; overflow-x: hidden; overflow-y: hidden; ">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" style="position: absolute; top: 0px; opacity: 1; width: 200px; height: 200px; z-index: 3; left: 232px; display: none; ">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" style="position: absolute; z-index: 4; top: 0px; opacity: 1; display: block; width: 200px; height: 200px; left: 0px; ">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" style="position: absolute; top: 0px; opacity: 1; width: 200px; height: 200px; z-index: 3; left: 232px; display: none; ">
        </div>

CSS

.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
overflow: hidden;
}

JavaScript

$('#content').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 3000, 
    next:   '#content', 
    pause:   1 
});