JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.scrollVert.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>

<div id="upDiv">
					<a href="#" id="upImg"><img src="http://c.dryicons.com/images/icon_sets/stickers_icon_set/png/128x128/up_arrow.png" alt="" width=30 height=30 /></a>
					<p>scroll up</p>
				</div>
				<div id="prevDiv">
					<a href="#" id="prevImg"><img src="http://c.dryicons.com/images/icon_sets/stickers_icon_set/png/128x128/left_arrow.png" witdh=30 height=30 alt="" /></a>
				</div>
				<div class="cycle-slideshow outer-slideshow"                         
						data-cycle-timeout="0" 
						data-cycle-prev="#prevDiv" 
						data-cycle-next="#nextDiv"
						data-cycle-center-horz=true
					    data-cycle-center-vert=true
					    data-cycle-pager="#thumbnails"
					    data-cycle-pager-template="<a href=#><img src='{{src}}' height=160 /></a>"
					    data-cycle-caption="#cycle-caption"
					    data-cycle-caption-template="<p id=&quot;captionHeader&quot;> {{captionHeader}}</p><p id=&quot;captionText&quot;> {{captionText}}</p>"
					    data-cycle-slides=".outer-slide"
				>
				    <img src="http://malsup.github.com/images/p1.jpg" data-cycle-caption-header="Outer Slideshow" data-cycle-caption-text="Slide 1" class="outer-slide" />
				    <img src="http://malsup.github.com/images/p2.jpg" data-cycle-caption-header="Outer Slideshow" data-cycle-caption-text="Slide 2" class="outer-slide" />                 
				    
				    <div class="cycle-slideshow outer-slide inner-slideshow" 
				    		data-cycle-fx="scrollVert"
						    data-cycle-allow-wrap=false
							data-cycle-timeout="0"
							data-cycle-prev="#upDiv"
							data-cycle-next="#downDiv"
							data-cycle-center-horz=true
							data-cycle-center-vert=true
                            data-cycle-caption="#cycle-caption"
					        data-cycle-caption-template="<p...

CSS

div.outer-slideshow img, div.inner-slideshow img {
    width:250px;
    height:150px;
}
    
div.outer-slideshow
{
	width: 250px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 45px;
}
div.inner-slideshow
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#prevDiv
{
	position: absolute;
	top: 150px;
	left: 15%;
	width: 22px;
	height: 43px;
	z-index:2;
}

#nextDiv
{
	position: absolute;
	top: 150px;
	right: 15%;
	width: 22px;
	height: 43px;
	z-index:2;
}

#upDiv
{
	width: 43px;
	height: 22px;
	margin-left:auto;
	margin-right:auto;
	font-size:12px;
	margin-top: 5px;
	visibility:collapse;
}

#upDiv p
{
	margin-top:0px;
}

#downDiv
{
	width: 113px;
	height: 22px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:14px;
	font-size: 12px;
	visibility:collapse;
}

#downDiv img
{
	margin-left: 35px;	
}
#thumbnails
{
	width:1100px;
	height:160px;
	position:relative;
	top:350px;
	white-space: nowrap;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}
    
a img
{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
	margin-right:2px;
	display:inline;
}

a.cycle-pager-active img
{
	-webkit-filter: none;
	-moz-filter: none;
	filter: none;
}

#cycle-caption
{
	width:680px;
	margin-left:auto;
	margin-right:auto;
	font-size:16px;
	font-family: "Trebuchet MS", tahoma;
}

#captionHeader
{
	margin-top:20px;
	margin-bottom:5px;
}

#captionText
{
	margin:0;
}

JavaScript

function setVisibility(activeImage)
{
	if (activeImage.attr("data-cycle-multiple-slide") == "true")
	{
		$('#upDiv').css('visibility', 'visible');
		$('#downDiv').css('visibility', 'visible');
	}
	else
	{
		$('#upDiv').css('visibility', 'collapse');
		$('#downDiv').css('visibility', 'collapse');
	}
}

$("#prevImg").click(function () { 
	
	if ($('a.cycle-pager-active').prev().length != 0)
	{
		var leftPos = $('a.cycle-pager-active').prev().position().left;
	
		if (leftPos < 0)
		{
		  $('#thumbnails').animate({scrollLeft: leftPos - 100}, 200);
		}
		setVisibility($('a.cycle-pager-active').prev());
	}
	else
	{
		$('#thumbnails').animate({scrollLeft: $('#thumbnails').width()}, 200);
		setVisibility($('a.cycle-pager-active').last());
	}
	

});

$("#nextImg").click(function () { 
	if ($('a.cycle-pager-active').next().length != 0)
	{
		var leftPos = $('a.cycle-pager-active').next().position().left;
		var rightPos = leftPos + $('.cycle-pager-active').next().width();

		if (rightPos > 1100)
		{
			$('#thumbnails').animate({scrollLeft: rightPos + 100}, 200);
		}
		setVisibility($('a.cycle-pager-active').next());
	}
	else
	{
		$('#thumbnails').animate({scrollLeft: 0}, 200);
		setVisibility($('a.cycle-pager-active').first());
	}
});