jQuery motion blur slider demo

index.html

	<link rel="stylesheet" href="css/normalize.css"/>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.4/lumen/bootstrap.min.css"/>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/css/motion-blur-gallery.css" />

<!-- Begin jQuery-Motion-Blur-Gallery -->
			<div class="motion-blur-gallery">
				<ul>
					<li>
						<img src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/img/1.jpg" alt="img01">
						<p class="text-center">This is an image caption</p>
					</li>
					<li>
						<img src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/img/2.jpg" alt="img02">
						<p class="text-center">This is an image caption</p>
					</li>
					<li>
						<img src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/img/3.jpg" alt="img03">
						<p class="text-center">This is an image caption</p>
					</li>
					<li>
						<img src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/img/4.jpg" alt="img04">
						<p class="text-center">This is an image caption</p>
					</li>
					<li>
						<img src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/img/5.jpg" alt="img05">
						<p class="text-center">This is an image caption</p>
					</li>
					<li>
						<img src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/img/6.jpg" alt="img06">
						<p class="text-center">This is an image caption</p>
					</li>
					<li>
						<img src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/img/7.jpg" alt="img07">
						<p class="text-center">This is an image caption</p>
					</li>
					<li>
						<img src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/img/8.jpg" alt="img08">
						<p class="text-center">This is an image caption</p>
					</li>
					<li>
						<img src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/img/9.jpg" alt="img09">
						<p class="text-center">This is an image caption</p>
					</li>
				</ul>
			</div>
			<!-- End jQuery-Motion-Blur-Gallery -->

<p style="text-align:center">
  <strong>Controls: </strong> Use arrow keys on keyboard or grab an image with your mouse
  <br><br>
<a href="https://github.com/kidGodzilla/jQuery-Motion-Blur-Gallery" target="_github">View on Github</a></p>

<!-- Any version of jQuery will do -->
<script src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/js/jquery.min.js"></script>

<!-- Greensock TweenMax -->
<script src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/js/TweenMax.min.js"></script>

<!-- jQuery-Motion-Blur-Gallery Plugin -->
<script src="https://kidgodzilla.github.io/jQuery-Motion-Blur-Gallery/js/jquery.motion-blur-gallery.js"></script>

<!-- jQuery-Motion-Blur-Gallery Example Usage -->
<script>
	$(document).ready(function () {
		$('.motion-blur-gallery').motionBlurGallery({
			initialImageOffset: 2
		});
	});
</script>

jquery-motion-blur-slider-demo.markdown

jQuery motion blur slider demo

A demo of the jQuery motion blur slider plugin https://github.com/kidGodzilla/jQuery-Motion-Blur-Gallery

A Pen by James Futhey on CodePen.

License.