JSFiddle - React, Tailwind, and code Playground

by Phil Everton

HTML

<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<div class="show">
	<a href="#1"><img src="http://lorempixel.com/output/fashion-q-c-640-480-6.jpg"/></a>
	<a href="#2"><img src="http://lorempixel.com/output/food-q-c-640-480-9.jpg"/></a>
	<a href="#3"><img src="http://lorempixel.com/output/nightlife-q-c-640-480-1.jpg"/></a>
</div>
<div class="show">
    <a href="#2"><img src="http://lorempixel.com/output/food-q-c-640-480-9.jpg"/></a>
    <a href="#3"><img src="http://lorempixel.com/output/nightlife-q-c-640-480-1.jpg"/></a>
    <a href="#1"><img src="http://lorempixel.com/output/fashion-q-c-640-480-6.jpg"/></a>
</div>

CSS

/*common*/
html,body{margin:0;padding:0}
img{outline:0;border:none;width:100%;height:auto;}
.show { width:50%; margin:0 auto; }

JavaScript

$('.show').each(function(i) {
    //initialized
    $(this).on('cycle-initialized', function(e, opts) {
        alert('OMG, it hit initialized on '+i+'...');
    })
    //slideshow
    .cycle({
        carouselFluid:		true,
        slides:				'a',
        pauseOnHover:		true
    });
});