Master Slider Showcase1 Template

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

	<!-- template -->
	<div class="ms-showcase1">
				<!-- masterslider -->
				<div class="master-slider ms-skin-light-6 round-skin" id="masterslider">
				    <div class="ms-slide t-green">
				        <img src="../masterslider/style/blank.gif" data-src="img/1.png" alt="lorem ipsum dolor sit"/> 
				         
				        <h4  class="ms-layer product-title"	style="left:637px; top:270px;" 
				        	data-effect="left(100)"
				        	data-delay="0"
				        	data-ease="easeOutQuad"
				        >GREEN T-SHIRT</h4>
				        
				        <div class="ms-layer product-title slash" style="left:834px; top:270px;" 
				        	data-effect="left(20)"
				        	data-delay="100"
				        	data-ease="easeOutQuad"
				        >/</div>
				       	<div class="ms-layer product-price" style="left:849px; top:270px;"
				       		data-effect="right(20)"
				       		data-delay="400"
				       		data-ease="easeOutQuad"
				       	>$7</div>
				        <div class="ms-layer product-size" 	style="left:637px; top:310px;"
				        	data-effect="right(20)"
				        	data-delay="600"
				        	data-ease="easeOutExpo"
				        >Medium Size</div>
				        <div class="ms-layer product-desc" 	style="left:637px; top:335px;"
				        	data-effect="bottom(40)"
				        	data-delay="500"
				        	data-ease="easeInOutQuad"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid</div>
				        
						<div class="ms-layer buy-btn" style="left:637px; top:385px;"
							data-effect="bottom(40)"
				        	data-delay="900"
				        	data-ease="easeInOutQuad">
							<a href="#" title="buy">BUY</a>
						</div>
						 <div class="ms-layer"	style="left:418px; top:335px;"
				        	data-delay="300"
				        	data-type="hotspot"
				        	data-align="left"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:664px; top:208px;"
				        	data-delay="400"
				        	data-type="hotspot"
				        	data-align="right"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:375px; top:115px;"
				        	data-delay="500"
				        	data-type="hotspot"
				        	data-align="bottom"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
				        
				    </div>
				    <div class="ms-slide t-yellow">
				        <img src="../masterslider/style/blank.gif" data-src="img/2.png" alt="lorem ipsum dolor sit"/>     
				        
				        <h4  class="ms-layer product-title"	style="left:637px; top:270px;" 
				        	data-effect="left(100)"
				        	data-delay="0"
				        	data-ease="easeOutQuad"
				        >YELLOW T-SHIRT</h4>
				        
				        <div class="ms-layer product-title slash" style="left:853px; top:270px;" 
				        	data-effect="left(20)"
				        	data-delay="100"
				        	data-ease="easeOutQuad"
				        >/</div>
				       	<div class="ms-layer product-price" style="left:867px; top:270px;"
				       		data-effect="right(20)"
				       		data-delay="400"
				       		data-ease="easeOutQuad"
				       	>$9</div>
				        <div class="ms-layer product-size" 	style="left:637px; top:310px;"
				        	data-effect="right(20)"
				        	data-delay="600"
				        	data-ease="easeOutExpo"
				        >Medium Size</div>
				        <div class="ms-layer product-desc" 	style="left:637px; top:335px;"
				        	data-effect="bottom(40)"
				        	data-delay="500"
				        	data-ease="easeInOutQuad"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid</div>
				        
						<div class="ms-layer buy-btn" style="left:637px; top:385px;"
							data-effect="bottom(40)"
				        	data-delay="900"
				        	data-ease="easeInOutQuad">
							<a href="#" title="buy">BUY</a>
						</div>
						
						 <div class="ms-layer"	style="left:418px; top:335px;"
				        	data-delay="300"
				        	data-type="hotspot"
				        	data-align="left"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:664px; top:208px;"
				        	data-delay="400"
				        	data-type="hotspot"
				        	data-align="right"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:375px; top:115px;"
				        	data-delay="500"
				        	data-type="hotspot"
				        	data-align="bottom"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
				    </div>
				    <div class="ms-slide t-orange">
				        <img src="../masterslider/style/blank.gif" data-src="img/3.png" alt="lorem ipsum dolor sit"/>    
				      
				           <h4  class="ms-layer product-title"	style="left:637px; top:270px;" 
				        	data-effect="left(100)"
				        	data-delay="0"
				        	data-ease="easeOutQuad"
				        >ORANGE T-SHIRT</h4>
				        
				        <div class="ms-layer product-title slash" style="left:855px; top:270px;" 
				        	data-effect="left(20)"
				        	data-delay="100"
				        	data-ease="easeOutQuad"
				        >/</div>
				       	<div class="ms-layer product-price" style="left:868px; top:270px;"
				       		data-effect="right(20)"
				       		data-delay="400"
				       		data-ease="easeOutQuad"
				       	>$8</div>
				        <div class="ms-layer product-size" 	style="left:637px; top:310px;"
				        	data-effect="right(20)"
				        	data-delay="600"
				        	data-ease="easeOutExpo"
				        >Medium Size</div>
				        <div class="ms-layer product-desc" 	style="left:637px; top:335px;"
				        	data-effect="bottom(40)"
				        	data-delay="500"
				        	data-ease="easeInOutQuad"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid</div>
				        
						<div class="ms-layer buy-btn" style="left:637px; top:385px;"
							data-effect="bottom(40)"
				        	data-delay="900"
				        	data-ease="easeInOutQuad">
							<a href="#" title="buy">BUY</a>
						</div>
						
						  <div class="ms-layer"	style="left:418px; top:335px;"
				        	data-delay="300"
				        	data-type="hotspot"
				        	data-align="left"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:664px; top:208px;"
				        	data-delay="400"
				        	data-type="hotspot"
				        	data-align="right"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:375px; top:115px;"
				        	data-delay="500"
				        	data-type="hotspot"
				        	data-align="bottom"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
				    </div>
				    <div class="ms-slide t-red">
				        <img src="../masterslider/style/blank.gif" data-src="img/4.png" alt="lorem ipsum dolor sit"/>    
				        
				        <h4  class="ms-layer product-title"	style="left:637px; top:270px;" 
				        	data-effect="left(100)"
				        	data-delay="0"
				        	data-ease="easeOutQuad"
				        >RED T-SHIRT</h4>
				        
				        <div class="ms-layer product-title slash" style="left:799px; top:270px;" 
				        	data-effect="left(20)"
				        	data-delay="100"
				        	data-ease="easeOutQuad"
				        >/</div>
				       	<div class="ms-layer product-price" style="left:811px; top:270px;"
				       		data-effect="right(20)"
				       		data-delay="400"
				       		data-ease="easeOutQuad"
				       	>$8</div>
				        <div class="ms-layer product-size" 	style="left:637px; top:310px;"
				        	data-effect="right(20)"
				        	data-delay="600"
				        	data-ease="easeOutExpo"
				        >Medium Size</div>
				        <div class="ms-layer product-desc" 	style="left:637px; top:335px;"
				        	data-effect="bottom(40)"
				        	data-delay="500"
				        	data-ease="easeInOutQuad"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid</div>
				        
						<div class="ms-layer buy-btn" style="left:637px; top:385px;"
							data-effect="bottom(40)"
				        	data-delay="900"
				        	data-ease="easeInOutQuad">
							<a href="#" title="buy">BUY</a>
						</div>
						
						 <div class="ms-layer"	style="left:418px; top:335px;"
				        	data-delay="300"
				        	data-type="hotspot"
				        	data-align="left"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:664px; top:208px;"
				        	data-delay="400"
				        	data-type="hotspot"
				        	data-align="right"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:375px; top:115px;"
				        	data-delay="500"
				        	data-type="hotspot"
				        	data-align="bottom"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
				    </div>
				    <div class="ms-slide t-blue">
				        <img src="../masterslider/style/blank.gif" data-src="img/5.png" alt="lorem ipsum dolor sit"/>  
				         <h4  class="ms-layer product-title"	style="left:637px; top:270px;" 
				        	data-effect="left(100)"
				        	data-delay="0"
				        	data-ease="easeOutQuad"
				        >BLUE T-SHIRT</h4>
				        
				        <div class="ms-layer product-title slash" style="left:809px; top:270px;" 
				        	data-effect="left(20)"
				        	data-delay="100"
				        	data-ease="easeOutQuad"
				        >/</div>
				       	<div class="ms-layer product-price" style="left:822px; top:270px;"
				       		data-effect="right(20)"
				       		data-delay="400"
				       		data-ease="easeOutQuad"
				       	>$8</div>
				        <div class="ms-layer product-size" 	style="left:637px; top:310px;"
				        	data-effect="right(20)"
				        	data-delay="600"
				        	data-ease="easeOutExpo"
				        >Medium Size</div>
				        <div class="ms-layer product-desc" 	style="left:637px; top:335px;"
				        	data-effect="bottom(40)"
				        	data-delay="500"
				        	data-ease="easeInOutQuad"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid</div>
				        
						<div class="ms-layer buy-btn" style="left:637px; top:385px;"
							data-effect="bottom(40)"
				        	data-delay="900"
				        	data-ease="easeInOutQuad">
							<a href="#" title="buy">BUY</a>
						</div>
						
						 <div class="ms-layer"	style="left:418px; top:335px;"
				        	data-delay="300"
				        	data-type="hotspot"
				        	data-align="left"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:664px; top:208px;"
				        	data-delay="400"
				        	data-type="hotspot"
				        	data-align="right"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:375px; top:115px;"
				        	data-delay="500"
				        	data-type="hotspot"
				        	data-align="bottom"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
				    </div>
				</div>
				<!-- end of masterslider -->
	</div>
	<!-- end of template -->

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

	<script type="text/javascript">		
	
		var slider = new MasterSlider();
		slider.setup('masterslider' , {
			width:1024 ,
			height:580,
			space:0,
			fillMode:'fit',
			speed:25,
			preload:'all',
			view:'flow',
			loop:true
		});
		
		slider.control('arrows');	
		slider.control('bullets');
	</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/light-6/style.css" rel='stylesheet' type='text/css'>
		 
		<!-- MasterSlider Template Style -->
		<link href='style/ms-showcase1.css' rel='stylesheet' type='text/css'>
		
		<!-- google font Lato -->
		<link href='http://fonts.googleapis.com/css?family=Lato:300,400' 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>