JSFiddle - React, Tailwind, and code Playground

by Givet Atry

HTML

<!--Cycle2 Plugin-->  
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>  
  
<!--begin slideshow-->  
<div class="cycle-slideshow"   
    data-cycle-fx="fade"  
    >  
<!-- prev/next links -->  
<div class="cycle-prev"></div>  
<div class="cycle-next"></div>  
  
<!--insert your images below-->  
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="description">  
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="description">  
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="description">  
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="description">  
<p>Mouse over image for previous / next links</p>  
</div><!--end slideshow-->

CSS

/**Slideshow**/  
.cycle-slideshow {  
width:400px; /**adjust width as required**/  
margin: 0 auto;  
text-align: center;  
}  
.cycle-slideshow img {max-width:100%}  
  
/* prev / next links */  
.cycle-prev, .cycle-next {  
position: absolute;  
top: 0;  
width: 30%;  
opacity: 0;  
filter: alpha(opacity=0);  
z-index: 800;  
height: 100%;  
cursor: pointer;  
}  
.cycle-prev {  
left: 0;  
background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;  
}  
.cycle-next {  
right: 0;  
background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;  
}  
.cycle-prev:hover, .cycle-next:hover {  
opacity: .7;  
filter: alpha(opacity=70)  
}  
/**end slideshow styles**/