liMarquee / Content
in Tabs

RESULT

• TAB 1 - TEXT
• TAB 2 - IMAGES
• TAB 3 - HTML

A fool may ask more questions in an hour than a wise man can answer in seven years

1 2 3 4 5 6 7 8 9 0

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>
	
	<!-- jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. -->
	<link rel="stylesheet" href="css/jquery-ui.css">
	<script src="js/jquery-ui.js"></script>
	
	<!-- Plugins files-->
	<link rel="stylesheet" href="css/liMarquee.css">
	
	<script src="js/jquery.liMarquee.js"></script>
	
	
	
	
	<!-- Initialization of plugin -->
	<script>
	$(window).on('load',function(){
	$('.tabs').tabs({
		activate: function( event, ui ) {
			/*run initialization function*/
			pluginIni();
		}	
	});
	
	/*marquee initialization function*/
	function pluginIni(){
		/*stopping all hidden marquees*/
		$('.anyClass:hidden').liMarquee('stop');
		
		/*initialization only visible and not initialized marquee*/
		$('.anyClass:visible').not('.mIni').liMarquee({
			startShow:true,
			circular:true
		});
		
		/*startin only visible marquee*/
		$('.anyClass:visible')
			.liMarquee('start')
			.liMarquee('resetPosition');
	}
	pluginIni();
})
	</script> 
	
	
	<!-- HTML code-->
	<div class="tabs">
		<ul>
			<li><a href="#tabs-1">TAB 1 - TEXT</a></li>
			<li><a href="#tabs-2">TAB 2 - IMAGES</a></li>
			<li><a href="#tabs-3">TAB 3 - HTML</a></li>
		</ul>
		<div id="tabs-1">
			<div class="anyClass mWrap">
				 A fool may ask more questions in an hour than a wise man can answer in seven years 
			</div>
		</div>
		<div id="tabs-2">
			<div class="anyClass mWrap">
				<a href="#"><img src="pic/logo_0.png"></a>
				<a href="#"><img src="pic/logo_1.png"></a>
				<a href="#"><img src="pic/logo_2.png"></a>
				<a href="#"><img src="pic/logo_3.png"></a>
				<a href="#"><img src="pic/logo_4.png"></a>
				<a href="#"><img src="pic/logo_5.png"></a>
				<a href="#"><img src="pic/logo_6.png"></a>
				<a href="#"><img src="pic/logo_7.png"></a>
				<a href="#"><img src="pic/logo_8.png"></a>
				<a href="#"><img src="pic/logo_9.png"></a>
			</div>
		</div>
		<div id="tabs-3">
			<div class="anyClass mWrap">
				<span class="htmlItem">1</span>
				<span class="htmlItem">2</span>
				<span class="htmlItem">3</span> 
				<span class="htmlItem">4</span>
				<span class="htmlItem">5</span>
				<span class="htmlItem">6</span>
				<span class="htmlItem">7</span>
				<span class="htmlItem">8</span>
				<span class="htmlItem">9</span>
				<span class="htmlItem">0</span>
			</div>
		</div>
	</div>