yashilanka / paw-carousel Goto Github PK

##PaW Carousel V2 – infinite, responsive, lightweight jQuery plugin

• Under 6KB when minified
• @2x/high-res/retina image support
• Add multiple carousels on one page
• Completely rewritten to be faster and more reliable
• Better loading of images to look smoother
• More reliable video scaling
• More robust at all screen sizes
• Choose whether to resize or crop images at smaller screen sizes
• Must include image and video dimensions – solves a lot of headaches

Include CSS, jQuery, PaW Carousel plugin and JS call e.g.

<link rel="stylesheet" href="css/pawcarousel.css">
<!--You can use jQuery 2.x as well if you don't want to support older browsers -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/pawcarousel.jquery.min.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">
		<div class="paw-carousel-items-wrap">
			<div class="paw-carousel-item">
				<img src="images/x.gif" data-src="assets/media/egs/eg-01.jpg" data-src-2x="assets/media/egs/[email protected]" width="494" height="370" class="paw-carousel-item-media">
				<h3>This is some description text</h3>
			</div>
			<div class="paw-carousel-item">
				<a href="http://picturesandwriting.com" title="A link to Shaun's portolfio site">
					<img src="images/x.gif" data-src="assets/media/egs/eg-02.jpg" data-src-2x="assets/media/egs/[email protected]" width="494" height="370" class="paw-carousel-item-media"">
					<h3>This image has a link</h3>
				</a>
			</div>
			<div class="paw-carousel-item">
				<iframe width="560" height="315" src="//www.youtube.com/embed/aYxni8ohTfU" frameborder="0" allowfullscreen></iframe>
			</div>
		</div>
		<!--Next and previous links. SVGs - change with PNGs if you want browser support -->
		<a href="#" class="paw-carousel-prev"><img src="images/arr-prev.svg" alt="Previous"></a>
		<a href="#" class="paw-carousel-next"><img src="images/arr-next.svg" alt="Next"></a>
		<!--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>

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

© Copyright 2014 Shaun Morrison. The PaW Carousel code is licensed under the GPL license.

© Copyright 2014 Shaun Morrison. All rights reserved.

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.