liMarquee / Multiple

RESULT

Lorem ipsum 1.1

Lorem ipsum 1.2

Lorem ipsum 2.1

Lorem ipsum 2.2

CODE

<!--If you have already use jquery, then this line is not necessary-->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>


<!-- Plugins files-->
<link rel="stylesheet" href="css/liMarquee.css">

<script src="js/jquery.liMarquee.js"></script>

<!-- Styles for example -->
<style>
.contItem { display:inline-block; vertical-align:top; width:300px; padding:20px; white-space:normal;}
.contItemImage { width:100%;}
.contItemTitle { font:16px/1.2em Arial, Helvetica, sans-serif; display:block; padding:0 0 10px 0;}
.contItemText { font:16px/1.2em Arial, Helvetica, sans-serif; padding:20px 0; text-transform:none; text-align:left;}
</style>

<!-- Initialization of plugin -->
<script>
$(window).on('load',function(){
	$('.str1').liMarquee({circular:true, startShow:true});
	$('.str2').liMarquee({circular:true, startShow:true, direction:'right'});
})
</script> 


<!-- HTML code-->
<div class="str1 mWrap">
	<div class="contItem">
		<a href="#"><img src="pic/image.jpg" class="contItemImage"></a>
		<div class="contItemText">
			<a class="contItemTitle" href="#">Lorem ipsum 1.1</a> 
		</div>
	</div>
	<div class="contItem">
		<a href="#"><img src="pic/image.jpg" class="contItemImage"></a>
		<div class="contItemText">
			<a class="contItemTitle" href="#">Lorem ipsum 1.2</a> 
		</div>
	</div>
</div>

<div class="str2 mWrap">
	<div class="contItem">
		<a href="#"><img src="pic/image.jpg" class="contItemImage"></a>
		<div class="contItemText">
			<a class="contItemTitle" href="#">Lorem ipsum 2.1</a> 
		</div>
	</div>
	<div class="contItem">
		<a href="#"><img src="pic/image.jpg" class="contItemImage"></a>
		<div class="contItemText">
			<a class="contItemTitle" href="#">Lorem ipsum 2.2</a> 
		</div>
	</div>
</div>