JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.tile.min.js"></script>
<div id="gallery" data-cycle-tile-count="27">
    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg" width="500" height="400" alt="" />
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg" width="500" height="400" alt="" />  
 </div>
      
      
<div class="nav">
    <a href="#" id="nextSlide">NEXT</a><br />
    <a href="#" id="prevSlide">PREVIOUS</a>
</div>

CSS

#gallery {
 	position:relative;
	overflow:hidden;
	width:500px;
	height:400px;	
}
.nav {
    margin:20px;
    
}

JavaScript

$(document).ready(function() {
    $('#gallery').cycle({ 
        fx: 'tileBlind',
        delay: 1000,
        next:   '#nextSlide', 
        prev:   '#prevSlide',
        speed: 250
    });	
});