<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<title>Master Slider Carousel 3D Template</title>	
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<!-- 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-caro3d.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>
	</head>
		
	<body>

		<!-- template -->
		<div class="ms-caro3d-template ms-caro3d-wave">
				<!-- 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>
		<!-- end of template -->

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

		slider.control('arrows');	

		slider.setup('masterslider' , {
			width:460,
			height:270,
			space:0,
			loop:true,
			view:'wave',
			layout:'partialview'
		});

	</script>
</html>