JSFiddle - React, Tailwind, and code Playground

by Wesley Smith

HTML

<link rel="Stylesheet" type="text/css" href="http://smoothdivscroll.com/css/smoothDivScroll.css" />      

<div id="logoParade">
        <a href="#" target="_blank"><img src="http://promasterautomotive.com/images/logos/wiseco.png" class="logos"></a>
		<a href="#" target="_blank"><img src="http://promasterautomotive.com/images/logos/bullydog.png" class="logos"></a>
		<a href="#" target="_blank"><img src="http://promasterautomotive.com/images/logos/vortek.png" class="logos"></a>
		<a href="#" target="_blank" id="startAtMe"><img src="http://promasterautomotive.com/images/logos/sinister.png" class="logos"></a>
		<a href="#" target="_blank"><img src="http://promasterautomotive.com/images/logos/schaeffers.png" class="logos"></a>
		<a href="#" target="_blank"><img src="http://promasterautomotive.com/images/logos/arp.png" class="logos"></a>
		<a href="#" target="_blank"><img src="http://promasterautomotive.com/images/logos/bpd.png" class="logos"></a>
		<a href="#" target="_blank"><img src="http://promasterautomotive.com/images/logos/sct.png" class="logos"></a>
	</div>	
            
            
      
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://smoothdivscroll.com/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
	<script src="http://smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
	<script src="http://smoothdivscroll.com/js/jquery.kinetic.min.js" type="text/javascript"></script>
	<script src="http://smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>

CSS

#logoParade
{
	width: 728px;
	height: 75px;
	position: relative;
}

#logoParade div.scrollableArea a
{
	display: block;
	float: left;
	padding-left: 10px;
}
.logos {
  opacity: 0.5;
  filter: alpha(opacity=50);
  height: 35px;
}

JavaScript

$("#logoParade").smoothDivScroll({ 
		autoScrollingMode: "always", 
		autoScrollingDirection: "endlessLoopRight", 
		autoScrollingStep: 1, 
		autoScrollingInterval: 25 
	});

	// Logo parade event handlers
	$("#logoParade").bind("mouseover", function() {
		$(this).smoothDivScroll("stopAutoScrolling");
	}).bind("mouseout", function() {
		$(this).smoothDivScroll("startAutoScrolling");
	});