README.html

<h2>PaW Carousel V2 – infinite, responsive, lightweight jQuery plugin</h2>

<h2>What&rsquo;s new in Version 2?</h2>

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


<h2>How to use</h2>

<p>Include CSS, jQuery, PaW Carousel plugin and JS call e.g.</p>

<pre>
&lt;link rel="stylesheet" href="css/pawcarousel.css">
&lt;!--You can use jQuery 2.x as well if you don't want to support older browsers -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">&lt;/script>
&lt;script src="js/pawcarousel.jquery.min.js">&lt;/script>
&lt;script>
    $(function(){
        $('.paw-carousel').pawCarousel();
    });
&lt;/script>
</pre>


<p>Add the HTML to your page e.g.</p>

<pre>&lt;section class="paw-carousel-wrap">
    &lt;div class="paw-carousel">
        &lt;div class="paw-carousel-items-wrap">
            &lt;div class="paw-carousel-item">
                &lt;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">
                &lt;h3>This is some description text&lt;/h3>
            &lt;/div>
            &lt;div class="paw-carousel-item">
                &lt;a href="http://picturesandwriting.com" title="A link to Shaun's portolfio site">
                    &lt;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"">
                    &lt;h3>This image has a link&lt;/h3>
                &lt;/a>
            &lt;/div>
            &lt;div class="paw-carousel-item">
                &lt;iframe width="560" height="315" src="//www.youtube.com/embed/aYxni8ohTfU" frameborder="0" allowfullscreen>&lt;/iframe>
            &lt;/div>
        &lt;/div>
        &lt;!--Next and previous links. SVGs - change with PNGs if you want browser support -->
        &lt;a href="#" class="paw-carousel-prev">&lt;img src="images/arr-prev.svg" alt="Previous">&lt;/a>
        &lt;a href="#" class="paw-carousel-next">&lt;img src="images/arr-next.svg" alt="Next">&lt;/a>
        &lt;!--Left and right translucent masks - simply remove if not required-->
        &lt;div class="paw-carousel-mask paw-carousel-mask-l hide-med">&lt;/div>
        &lt;div class="paw-carousel-mask paw-carousel-mask-r hide-med">&lt;/div>
    &lt;/div>
    &lt;!--Thumbnail navigation-->
    &lt;nav id="paw-carousel-thumbs">
        &lt;ul>
            &lt;li class="paw-carousel-nav-item">&lt;img src="assets/media/egs/eg-t-01.jpg">&lt;/li>
            &lt;li class="paw-carousel-nav-item">&lt;img src="assets/media/egs/eg-t-02.jpg">&lt;/li>
            &lt;li class="paw-carousel-nav-item">&lt;img src="assets/media/egs/eg-t-03.jpg">&lt;/li>
        &lt;/ul>
    &lt;/nav>
&lt;/section></pre>


<p></p>

<h2>Example, Usage, Full Options and FAQs</h2>

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

<h2>Code Copyright and License</h2>

<p>&copy; Copyright 2014 Shaun Morrison. The PaW Carousel code is licensed under the <a href="http://www.gnu.org/licenses/gpl.html">GPL</a> license.</p>

<h2>Images/Photos Copyright</h2>

<p>&copy; Copyright 2014 Shaun Morrison. All rights reserved.</p>

<p>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.</p>