Master Slider AutoHeight Template

You need to put the following html markup in your html document where you want to have slider


<div class="ms-autoheight-template">
	<!-- masterslider -->
	<div class="master-slider ms-skin-default" id="masterslider">
	    <div class="ms-slide">
	        <img src="../masterslider/style/blank.gif" data-src="img/1.jpg" alt="lorem ipsum dolor sit"/>  				       
	    </div>
	    <div class="ms-slide">
	        <img src="../masterslider/style/blank.gif" data-src="img/2.jpg" alt="lorem ipsum dolor sit"/>     				       
	    </div>
	    <div class="ms-slide">
	        <img src="../masterslider/style/blank.gif" data-src="img/3.jpg" alt="lorem ipsum dolor sit"/>    
	    </div>
	    <div class="ms-slide">
	        <img src="../masterslider/style/blank.gif" data-src="img/4.jpg" alt="lorem ipsum dolor sit"/>    				        
	    </div>
	    <div class="ms-slide">
	        <img src="../masterslider/style/blank.gif" data-src="img/5.jpg" alt="lorem ipsum dolor sit"/>  			        
	    </div>
	    <div class="ms-slide">
	        <img src="../masterslider/style/blank.gif" data-src="img/6.jpg" alt="lorem ipsum dolor sit"/>   				  
	    </div>
	    <div class="ms-slide">
	        <img src="../masterslider/style/blank.gif" data-src="img/7.jpg" alt="lorem ipsum dolor sit"/>  
	    </div>
	</div>
	<!-- end of masterslider -->
</div>

You need to put the following scripts just before the < ⁄ body>

	<script type="text/javascript">
			
		var slider = new MasterSlider();

		slider.control('arrows');	
		slider.control('bullets' , {autohide:false, align:'bottom', margin:10});	
		slider.control('scrollbar' , {dir:'h',color:'#333'});

		slider.setup('masterslider' , {
			width:750,
			height:430,
			space:5,
			view:'basic',
			autoHeight:true
		});	

	</script>

You need to import the following files

		<!-- Base MasterSlider style sheet -->
		<link rel="stylesheet" href="../masterslider/style/masterslider.css" />
		
		<!-- Master Slider Skin -->
		<link href="../masterslider/skins/default/style.css" rel='stylesheet' type='text/css'>
		 
		<!-- MasterSlider Template Style -->
		<link href='style/ms-autoheight.css' rel='stylesheet' type='text/css'>
		
		<!-- jQuery -->
		<script src="../masterslider/jquery.min.js"></script>
		<script src="../masterslider/jquery.easing.min.js"></script>
		
		<!-- Master Slider -->
		<script src="../masterslider/masterslider.min.js"></script>