diff --git a/anim.htm b/anim.htm
new file mode 100644
index 0000000..cd7f744
--- /dev/null
+++ b/anim.htm
@@ -0,0 +1,53 @@
+<!DOCTYPE html> 
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
+
+<script src="js/jquery.bxSlider/jquery.easing.1.3.js"></script>
+<script src="js/jquery.bxSlider/jquery.bxSlider.min.js"></script>
+
+<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" type="text/css" media="all" />
+
+<style>
+
+	#animation {
+		width: 300px;
+		text-align: center;
+	}
+
+	.bx-captions {
+		font-family: sans-serif;
+	}
+</style>
+
+<body>
+	<div id="animation">
+	<ul id="frames">
+		<li><img title="This is the first frame" src="animation/img1.png">	
+		<li><img title="This is the second frame" src="animation/img2.png">	
+		<li><img title="This is the third frame" src="animation/img3.png">	
+	</ul>
+
+
+	<div id="slider"></div>
+	</div>
+<script type="text/javascript">
+var anim = $('#frames').bxSlider({
+	controls: false,
+	mode: 'fade',
+	speed: 100,
+	captions: true	
+});
+
+	
+$("#slider" ).slider({
+		value: 0,
+		min: 0,
+		max: 2,
+		step: 1,
+		slide: function( event, ui ) {
+			anim.goToSlide(ui.value);
+		}
+	});
+</script>
+
+</body>
diff --git a/animation/img1.png b/animation/img1.png
new file mode 100644
index 0000000..d2d6dda
Binary files /dev/null and b/animation/img1.png differ
diff --git a/animation/img2.png b/animation/img2.png
new file mode 100644
index 0000000..9ab83b5
Binary files /dev/null and b/animation/img2.png differ
diff --git a/animation/img3.png b/animation/img3.png
new file mode 100644
index 0000000..bca0651
Binary files /dev/null and b/animation/img3.png differ
