forked from shaunmorrison/PaW-Carousel
-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.html
86 lines (68 loc) · 3.82 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<h2>PaW Carousel V2 – infinite, responsive, lightweight jQuery plugin</h2>
<h2>What’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>
<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>
</pre>
<p>Add the HTML to your page e.g.</p>
<pre><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></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>© 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>© 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>