liMarquee / Html
Content

RESULT

Lorem ipsum Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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(){
	$('.str3-2').liMarquee({circular:true, startShow:true});
})
</script> 


<!-- HTML code-->
<div class="str3-2 mWrap">
	<div class="contItem">
		<a href="#"><img src="pic/image.jpg" class="contItemImage"></a>
		<div class="contItemText">
			<a class="contItemTitle" href="#">Lorem ipsum</a> 
			Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</div>
	</div>
	<div class="contItem">
		<a href="#"><img src="pic/image.jpg" class="contItemImage"></a>
		<div class="contItemText">
			<a class="contItemTitle" href="#">Lorem ipsum</a> 
			Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</div>
	</div>
	<div class="contItem">
		<a href="#"><img src="pic/image.jpg" class="contItemImage"></a>
		<div class="contItemText">
			<a class="contItemTitle" href="#">Lorem ipsum</a> 
			Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</div>
	</div>
	<div class="contItem">
		<a href="#"><img src="pic/image.jpg" class="contItemImage"></a>
		<div class="contItemText">
			<a class="contItemTitle" href="#">Lorem ipsum</a> 
			Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</div>
	</div>
	<div class="contItem">
		<a href="#"><img src="pic/image.jpg" class="contItemImage"></a>
		<div class="contItemText">
			<a class="contItemTitle" href="#">Lorem ipsum</a> 
			Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</div>
	</div>
</div>