JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.css">
<div>
<div id="coverflow">
<img src="http://placehold.it/350x350" />
<img src="http://placehold.it/350x350/E8117F/FFFFFF" />
<img src="http://placehold.it/350x380" />
<img src="http://placehold.it/350x350/E8117F/FFFFFF" />
<img src="http://placehold.it/350x350" />
</div>
</div>
<div id="coverflow-slider"></div>
CSS
.ui-coverflow-wrapper{
height:400px;
margin-top: 100px;
}
.ui-state-active{
border:0px;
}
JavaScript
$(function() {
$('#coverflow').coverflow({
active: 2,
select: function(event, ui){
console.log('here');
}
});
$('#coverflow img').click(function() {
if( ! $(this).hasClass('ui-state-active')){
return;
}
$('#coverflow').coverflow('next');
});
});