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/eg-01@2x.jpg" 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/eg-02@2x.jpg" 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.