1. Upload the css and js files to the server.
2. Add the link to the css file in the head of your html page.
	- Example:
	<link rel="stylesheet" href="css/main.css">
3. Add the link to the js file in the head of your html page or within the body tag.
	- Example:
	<link rel="stylesheet" href="js/main.js">
4. Add the following block of code to your html page and update the image path to your image.
		<div class="rotator">
        	<figure class="show">
        		<img alt="" src="http://placehold.it/1600x800" width="100%" />&nbsp;
				<figcaption>Image caption goes here.</figcaption>
			</figure>
		    <span class="prev">«</span>
		    <span class="next">»</span>
		</div>
5. To add more images simply paste in the following code and update the image path. 
			<figure>
			    <img alt="" src="http://placehold.it/1600x800" width="100%" width="100%" />&nbsp;
			    <figcaption>Image caption goes here.</figcaption>
			</figure>
6. The resulting code would look like this.
		<div class="rotator">
        	    <figure class="show">
        		<img alt="" src="http://placehold.it/1600x800" width="100%" />&nbsp;
				<figcaption>Image caption goes here.</figcaption>
		    </figure>
		    <figure>
        		<img alt="" src="http://placehold.it/1600x800" width="100%" />&nbsp;
				<figcaption>Image caption goes here.</figcaption>
		    </figure>
		    <figure>
        		<img alt="" src="http://placehold.it/1600x800" width="100%" />&nbsp;
				<figcaption>Image caption goes here.</figcaption>
		    </figure>
		    <span class="prev">«</span>
		    <span class="next">»</span>
		</div>
7. To add auto rotate functionality add the auto class to the container div
	- Example
	<div class="rotator auto”>
	
	</div>