Master Slider Flickr Template

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

	<!-- template -->
	<div class="ms-flickr-template">
		<!-- masterslider -->
		<div class="master-slider ms-skin-light-6 round-skin" id="masterslider">   
		</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:900,
			height:600,
			space:5,
			fillMode:'fit',
			preload:1,
			view:'basic'
		});
		
		slider.control('arrows');	
		slider.control('thumblist' , {autohide:false ,dir:'h',arrows:false});
		slider.control('bullets');
		
		var flkr = new MSFlickr(slider , {key:'Your API Key Here ...' , id:'User/Photoset ID' , desc:false , count:15});
		
	</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-flickr.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'>
		-->
		<script src="../masterslider/jquery.min.js"></script>
		<script src="../masterslider/jquery.easing.min.js"></script>
		
		<!-- Master Slider -->
		<script src="../masterslider/masterslider.min.js"></script>
		
		<!-- Master Slider Flickr Plugin -->
		<script src="masterslider.flickr.js"></script>