##PaW Carousel V2 – infinite, responsive, lightweight jQuery plugin
What's new in Version 2?
- 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
How to use
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>
Example, Usage, Full Options and FAQs
This page – http://picturesandwriting.com/paw-carousel/ - contains everything you should need to know.
Code Copyright and License
© Copyright 2014 Shaun Morrison. The PaW Carousel code is licensed under the GPL license.
Images/Photos Copyright
© 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.
