JSFiddle - React, Tailwind, and code Playground
by gsousa
HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://storage.sebringcreative.s3.amazonaws.com/jquery/jquery.dumbcrossfade-2.0.min.js"></script>
<style type="text/css">
/* <![CDATA[ */
.dumbCrossFade {
width:904px;
height:300px;
display:block;
cursor:pointer;
border:none;
position:relative;
overflow:hidden;
}
.dumbCrossFade .dumbItem {
display:none;
position:absolute;
top:0;
left:0;
border:none;
}
.dumbCrossFade .dumbItem img {
border:none;
}
.dumbCrossFade * {
border:none;
text-decoration:none;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$('.dumbCrossFade .dumbItem').dumbCrossFade({'slideType':'slidevertical','fadeInOut':true});
});
/* ]]> */
</script>
<div class="dumbCrossFade">
<div class="dumbItem">
<a href="Contact.aspx"><img src="http://storage.sebringcreative.s3.amazonaws.com/sebringcreative/images/image5.jpg" alt="Contact Us" \></a>
</div>
<div class="dumbItem">
<a href="CaseStudies.aspx"><img src="http://storage.sebringcreative.s3.amazonaws.com/sebringcreative/images/image1.jpg" alt="Case Studies" \></a>
</div>
<div class="dumbItem">
<a href="Print.aspx"><img src="http://storage.sebringcreative.s3.amazonaws.com/sebringcreative/images/image2.jpg" alt="Print Work" \></a>
</div>
<div class="dumbItem">
<a href="Web.aspx"><img src="http://storage.sebringcreative.s3.amazonaws.com/sebringcreative/images/image3.jpg" alt="Web Work" \></a>
</div>
<div class="dumbItem">
<a href="Design.aspx"><img src="http://storage.sebringcreative.s3.amazonaws.com/sebringcreative/images/image4.jpg" alt="Design" \></a>
</div>
</div>