JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jasondoyle69.com/js/jquery.simplyscroll.js"></script>


<ul id="scroller">
    <li><a href="http://www.bravo14.co.uk" target="_blank"><img src="http://www.jasondoyle69.com/images/sponsors-logos/bravo14.png" alt="Bravo14" style="max-width:200px;" /></a></li><li><img src="http://www.jasondoyle69.com/images/sponsors-logos/gmay.jpg" alt="G.May Building Services" style="max-width:200px;" /></li><li><a href="http://www.mcscs.co.uk" target="_blank"><img src="http://www.jasondoyle69.com/images/sponsors-logos/mcs.jpg" alt="MCS" style="max-width:"200px;" /></a></li><li><a href="http://www.mrpoolservices.com" target="_blank"><img src="http://www.jasondoyle69.com/images/sponsors-logos/29eacb5c9ef931e6135c9257c10a9c57.jpg" alt="M R Pool Services" style="max-width:200px;" /></a></li>
    </ul>

CSS

.simply-scroll-container { /* Container DIV - automatically generated */
	position: relative;
}

	.simply-scroll-clip { /* Clip DIV - automatically generated */
		position: relative;
		overflow: hidden;
	}

	.simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
		overflow: hidden;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
		.simply-scroll-list li {
			padding: 0;
			margin: 0;
			list-style: none;
			display: table-cell;
			text-align: center;
			vertical-align: middle;
			width: 200px;
			height: 200px;
		}

	
		.simply-scroll-list li img {
			display:block;
			vertical-align:middle;
			max-width:200px;
			border: none;
			
		}
	
	.simply-scroll-btn {
		position: absolute;
		background-image: url(buttons.png);
		width: 42px;
		height: 44px;
		z-index:3;
		cursor: pointer;
	}
	
	.simply-scroll-btn-left {
		left: 6px;
		bottom: 6px;
		background-position: 0 -44px;
	}
	.simply-scroll-btn-left.disabled {
		background-position: 0 0 !important;
	}
	.simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus {
		background-position: 0 -88px;
	}
	
	.simply-scroll-btn-right {
		right: 6px;
		bottom: 6px;
		background-position: -84px -44px;
	}
	.simply-scroll-btn-right.disabled {
		background-position: -84px 0 !important;
	}
	.simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus {
		background-position: -84px -88px;
	}
	
	.simply-scroll-btn-up {
		right: 6px;
		top: 6px;
		background-position: -126px -44px;
	}
	.simply-scroll-btn-up.disabled {
		background-position: -126px 0 !important;
	}
	.simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus {
		background-position: -126px -88px;
	}
	
	.simply-scroll-btn-down {
		right: 6px;
		bottom: 6px;
		background-position: -42px -44px;
	}
	.simply-scroll-btn-down.disabled {
		background-position: -42px 0 !important;
	}
	.simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus {
		background-position: -42px -88px;
	}
	
	.simply-scroll-btn-pause {
		right: 6px;
		bottom:...

JavaScript

(function($) {
	$(function() {
		$("#scroller").simplyScroll();
	});
})(jQuery);