JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js"></script>
<div id="slideshow">
	<ul class="ripple">
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach9.jpg" /></li>
	</ul>
	<ul class="ripple">
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" /></li>
		<li><img width="100" height="100" src="http://cloud.github.com/downloads/malsup/cycle/beach9.jpg"...

CSS

.ripple {
	background-color: #F2F2F2;
	border: 1px solid #CCC;
	display: inline-block;
	height: 100px;
	margin: 5px;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100px;
}

JavaScript

var delay = 100;
$("#slideshow ul").each(function() {
    $(this).cycle({ delay : delay, easing : "easeInOutElastic", fx : "scrollUp" });
    delay += 100;
});