PaW-Carousel

A jQuery plugin that provides an infinite, responsive carousel with thumbnail navigation.

How to use

Include CSS, jQuery, PaW Carousel plugin and JS call in the head of the document e.g.

<link rel="stylesheet" href="css/pawcarousel.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/pawcarousel.js"></script>
<script>
	$(function(){
		$('.paw-carousel').pawCarousel();
	});
</script>

Add the HTML to your page e.g.

<section class="paw-carousel-wrap">
	<div class="paw-carousel">
		<!--The loading overlay - remove if you don't want it-->
		<div class="paw-loading">
			<div class="inner">
				<img src="images/ajax-loader.gif">
				<p>Loading</p>
			</div>
		</div>
		<div class="paw-carousel-media">
			<div class="paw-carousel-item">
				<img src="assets/media/egs/eg-01.jpg">
				<h3>This is some description text</h3>
			</div>
			<div class="paw-carousel-item">
				<a href="http://picturesandwriting.com" title="A link to Shaun's portfolio site">
					<img src="assets/media/egs/eg-02.jpg">
					<h3>This image has a link</h3>
				</a>
			</div>
			<div class="paw-carousel-item">
				<img src="assets/media/egs/eg-03.jpg">
				<h3>This is some description text</h3>
			</div>
		</div>
		<!--Next and previous links-->
		<nav>
			<ul>
				<li><a href="#" class="paw-carousel-prev"><span class="replace">Previous</span></a></li>
				<li><a href="#" class="paw-carousel-next"><span class="replace">Next</span></a></li>
			</ul>
		</nav>
		<!--Left and right translucent masks - simply remove if not required-->
		<div class="paw-carousel-mask paw-carousel-mask-l hide-med"></div>
		<div class="paw-carousel-mask paw-carousel-mask-r hide-med"></div>
	</div>
	<!--Thumbnail navigation-->
	<nav id="paw-carousel-thumbs">
		<ul>
			<li class="paw-carousel-nav-item"><img src="assets/media/egs/eg-t-01.jpg"></li>
			<li class="paw-carousel-nav-item"><img src="assets/media/egs/eg-t-02.jpg"></li>
			<li class="paw-carousel-nav-item"><img src="assets/media/egs/eg-t-03.jpg"></li>
		</ul>
	</nav>
</section>

Example, Usage, Options and FAQs

This page – http://picturesandwriting.com/paw-carousel/ - contains everything you should need to know.

Code Copyright and License

Copyright © 2013 Shaun Morrison

The PaW Carousel plugin is licensed under the GPL license.

Images/Photos Copyright

Copyright © 2013 Shaun Morrison

The images are under full copyright with no permission to share or distribute in either commercial or non-commercial instances. You may use them as examples for the PaW Carousel plugin on Github for Pull Requests.