Index of /typewriter/node_modules/tiny-slider/
| Name | Last Modified | Size |
|---|---|---|
 Parent Directory | ||
 dist | 2023-06-25 07:45 | - |
| src | 2023-06-25 07:46 | - |
 LICENSE | 1985-10-26 10:15 | 2k |
| package.json | 2021-11-13 11:41 | 3k |
<!DOCTYPE html><html><head><meta charset="utf-8"><style>@font-face {
font-family: octicons-anchor;
src: url(https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.woff) format('woff');
}
* {
box-sizing: border-box;
}
body {
width: 980px;
margin-right: auto;
margin-left: auto;
}
body .markdown-body {
padding: 45px;
border: 1px solid #ddd;
border-radius: 3px;
word-wrap: break-word;
}
pre {
font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.markdown-body {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
color: #333;
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
}
.markdown-body a {
background-color: transparent;
}
.markdown-body a:active,
.markdown-body a:hover {
outline: 0;
}
.markdown-body strong {
font-weight: bold;
}
.markdown-body h1 {
font-size: 2em;
margin: 0.67em 0;
}
.markdown-body img {
border: 0;
}
.markdown-body hr {
box-sizing: content-box;
height: 0;
}
.markdown-body pre {
overflow: auto;
}
.markdown-body code,
.markdown-body kbd,
.markdown-body pre {
font-family: monospace, monospace;
font-size: 1em;
}
.markdown-body input {
color: inherit;
font: inherit;
margin: 0;
}
.markdown-body html input[disabled] {
cursor: default;
}
.markdown-body input {
line-height: normal;
}
.markdown-body input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
.markdown-body table {
border-collapse: collapse;
border-spacing: 0;
}
.markdown-body td,
.markdown-body th {
padding: 0;
}
.markdown-body input {
font: 13px / 1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.markdown-body a {
color: #4078c0;
text-decoration: none;
}
.markdown-body a:hover,
.markdown-body a:active {
text-decoration: underline;
}
.markdown-body hr {
height: 0;
margin: 15px 0;
overflow: hidden;
background: transparent;
border: 0;
border-bottom: 1px solid #ddd;
}
.markdown-body hr:before {
display: table;
content: "";
}
.markdown-body hr:after {
display: table;
clear: both;
content: "";
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
margin-top: 15px;
margin-bottom: 15px;
line-height: 1.1;
}
.markdown-body h1 {
font-size: 30px;
}
.markdown-body h2 {
font-size: 21px;
}
.markdown-body h3 {
font-size: 16px;
}
.markdown-body h4 {
font-size: 14px;
}
.markdown-body h5 {
font-size: 12px;
}
.markdown-body h6 {
font-size: 11px;
}
.markdown-body blockquote {
margin: 0;
}
.markdown-body ul,
.markdown-body ol {
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
.markdown-body ol ol,
.markdown-body ul ol {
list-style-type: lower-roman;
}
.markdown-body ul ul ol,
.markdown-body ul ol ol,
.markdown-body ol ul ol,
.markdown-body ol ol ol {
list-style-type: lower-alpha;
}
.markdown-body dd {
margin-left: 0;
}
.markdown-body code {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 12px;
}
.markdown-body pre {
margin-top: 0;
margin-bottom: 0;
font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.markdown-body .select::-ms-expand {
opacity: 0;
}
.markdown-body .octicon {
font: normal normal normal 16px/1 octicons-anchor;
display: inline-block;
text-decoration: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.markdown-body .octicon-link:before {
content: '\f05c';
}
.markdown-body:before {
display: table;
content: "";
}
.markdown-body:after {
display: table;
clear: both;
content: "";
}
.markdown-body>*:first-child {
margin-top: 0 !important;
}
.markdown-body>*:last-child {
margin-bottom: 0 !important;
}
.markdown-body a:not([href]) {
color: inherit;
text-decoration: none;
}
.markdown-body .anchor {
display: inline-block;
padding-right: 2px;
margin-left: -18px;
}
.markdown-body .anchor:focus {
outline: none;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
margin-top: 1em;
margin-bottom: 16px;
font-weight: bold;
line-height: 1.4;
}
.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
color: #000;
vertical-align: middle;
visibility: hidden;
}
.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
text-decoration: none;
}
.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
visibility: visible;
}
.markdown-body h1 {
padding-bottom: 0.3em;
font-size: 2.25em;
line-height: 1.2;
border-bottom: 1px solid #eee;
}
.markdown-body h1 .anchor {
line-height: 1;
}
.markdown-body h2 {
padding-bottom: 0.3em;
font-size: 1.75em;
line-height: 1.225;
border-bottom: 1px solid #eee;
}
.markdown-body h2 .anchor {
line-height: 1;
}
.markdown-body h3 {
font-size: 1.5em;
line-height: 1.43;
}
.markdown-body h3 .anchor {
line-height: 1.2;
}
.markdown-body h4 {
font-size: 1.25em;
}
.markdown-body h4 .anchor {
line-height: 1.2;
}
.markdown-body h5 {
font-size: 1em;
}
.markdown-body h5 .anchor {
line-height: 1.1;
}
.markdown-body h6 {
font-size: 1em;
color: #777;
}
.markdown-body h6 .anchor {
line-height: 1.1;
}
.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre {
margin-top: 0;
margin-bottom: 16px;
}
.markdown-body hr {
height: 4px;
padding: 0;
margin: 16px 0;
background-color: #e7e7e7;
border: 0 none;
}
.markdown-body ul,
.markdown-body ol {
padding-left: 2em;
}
.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
margin-top: 0;
margin-bottom: 0;
}
.markdown-body li>p {
margin-top: 16px;
}
.markdown-body dl {
padding: 0;
}
.markdown-body dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: bold;
}
.markdown-body dl dd {
padding: 0 16px;
margin-bottom: 16px;
}
.markdown-body blockquote {
padding: 0 15px;
color: #777;
border-left: 4px solid #ddd;
}
.markdown-body blockquote>:first-child {
margin-top: 0;
}
.markdown-body blockquote>:last-child {
margin-bottom: 0;
}
.markdown-body table {
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all;
}
.markdown-body table th {
font-weight: bold;
}
.markdown-body table th,
.markdown-body table td {
padding: 6px 13px;
border: 1px solid #ddd;
}
.markdown-body table tr {
background-color: #fff;
border-top: 1px solid #ccc;
}
.markdown-body table tr:nth-child(2n) {
background-color: #f8f8f8;
}
.markdown-body img {
max-width: 100%;
box-sizing: content-box;
background-color: #fff;
}
.markdown-body code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: rgba(0,0,0,0.04);
border-radius: 3px;
}
.markdown-body code:before,
.markdown-body code:after {
letter-spacing: -0.2em;
content: "\00a0";
}
.markdown-body pre>code {
padding: 0;
margin: 0;
font-size: 100%;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
.markdown-body .highlight {
margin-bottom: 16px;
}
.markdown-body .highlight pre,
.markdown-body pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #f7f7f7;
border-radius: 3px;
}
.markdown-body .highlight pre {
margin-bottom: 0;
word-break: normal;
}
.markdown-body pre {
word-wrap: normal;
}
.markdown-body pre code {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
.markdown-body pre code:before,
.markdown-body pre code:after {
content: normal;
}
.markdown-body kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: #555;
vertical-align: middle;
background-color: #fcfcfc;
border: solid 1px #ccc;
border-bottom-color: #bbb;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbb;
}
.markdown-body .pl-c {
color: #969896;
}
.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v {
color: #0086b3;
}
.markdown-body .pl-e,
.markdown-body .pl-en {
color: #795da3;
}
.markdown-body .pl-s .pl-s1,
.markdown-body .pl-smi {
color: #333;
}
.markdown-body .pl-ent {
color: #63a35c;
}
.markdown-body .pl-k {
color: #a71d5d;
}
.markdown-body .pl-pds,
.markdown-body .pl-s,
.markdown-body .pl-s .pl-pse .pl-s1,
.markdown-body .pl-sr,
.markdown-body .pl-sr .pl-cce,
.markdown-body .pl-sr .pl-sra,
.markdown-body .pl-sr .pl-sre {
color: #183691;
}
.markdown-body .pl-v {
color: #ed6a43;
}
.markdown-body .pl-id {
color: #b52a1d;
}
.markdown-body .pl-ii {
background-color: #b52a1d;
color: #f8f8f8;
}
.markdown-body .pl-sr .pl-cce {
color: #63a35c;
font-weight: bold;
}
.markdown-body .pl-ml {
color: #693a17;
}
.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms {
color: #1d3e81;
font-weight: bold;
}
.markdown-body .pl-mq {
color: #008080;
}
.markdown-body .pl-mi {
color: #333;
font-style: italic;
}
.markdown-body .pl-mb {
color: #333;
font-weight: bold;
}
.markdown-body .pl-md {
background-color: #ffecec;
color: #bd2c00;
}
.markdown-body .pl-mi1 {
background-color: #eaffea;
color: #55a532;
}
.markdown-body .pl-mdr {
color: #795da3;
font-weight: bold;
}
.markdown-body .pl-mo {
color: #1d3e81;
}
.markdown-body kbd {
display: inline-block;
padding: 3px 5px;
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
line-height: 10px;
color: #555;
vertical-align: middle;
background-color: #fcfcfc;
border: solid 1px #ccc;
border-bottom-color: #bbb;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbb;
}
.markdown-body .plan-price-unit {
color: #767676;
font-weight: normal;
}
.markdown-body .task-list-item {
list-style-type: none;
}
.markdown-body .task-list-item+.task-list-item {
margin-top: 3px;
}
.markdown-body .task-list-item input {
margin: 0 0.35em 0.25em -1.6em;
vertical-align: middle;
}
.markdown-body .plan-choice {
padding: 15px;
padding-left: 40px;
display: block;
border: 1px solid #e0e0e0;
position: relative;
font-weight: normal;
background-color: #fafafa;
}
.markdown-body .plan-choice.open {
background-color: #fff;
}
.markdown-body .plan-choice.open .plan-choice-seat-breakdown {
display: block;
}
.markdown-body .plan-choice-free {
border-radius: 3px 3px 0 0;
}
.markdown-body .plan-choice-paid {
border-radius: 0 0 3px 3px;
border-top: 0;
margin-bottom: 20px;
}
.markdown-body .plan-choice-radio {
position: absolute;
left: 15px;
top: 18px;
}
.markdown-body .plan-choice-exp {
color: #999;
font-size: 12px;
margin-top: 5px;
}
.markdown-body .plan-choice-seat-breakdown {
margin-top: 10px;
display: none;
}
.markdown-body :checked+.radio-label {
z-index: 1;
position: relative;
border-color: #4078c0;
}
@media print {
body .markdown-body {
padding: 0;
border: none;
}
}
</style><title>README</title></head><body><article class="markdown-body"><h1>
<a id="user-content-tiny-slider-20" class="anchor" href="#tiny-slider-20" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>tiny-slider 2.0</h1>
<p><a href="https://www.jsdelivr.com/package/npm/tiny-slider" rel="nofollow"><img src="https://camo.githubusercontent.com/5d683ae5a17660f059100950f6b4c237e9388cdf/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f74696e792d736c696465722f62616467653f7374796c653d726f756e646564" alt="" data-canonical-src="https://data.jsdelivr.com/v1/package/npm/tiny-slider/badge?style=rounded" style="max-width:100%;"></a>
<a href="https://camo.githubusercontent.com/9024be575b1bfe006e2216581242226f449b80a8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56657273696f6e2d322e382e312d677265656e2e737667" target="_blank" rel="nofollow"><img src="https://camo.githubusercontent.com/9024be575b1bfe006e2216581242226f449b80a8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56657273696f6e2d322e382e312d677265656e2e737667" alt="version" data-canonical-src="https://img.shields.io/badge/Version-2.8.1-green.svg" style="max-width:100%;"></a><br>
Tiny slider for all purposes, inspired by <a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="nofollow">Owl Carousel</a>.<br>
<a href="http://ganlanyuan.github.io/tiny-slider/tests/index.html" rel="nofollow">Demos</a><br>
<a href="http://ganlanyuan.github.io/tiny-slider/tests/tests.html" rel="nofollow">Tests</a>
(Can be tested on Firefox 12+, Chrome 15+, Safari 5.1+, Opera 12.1+, IE9+)<br>
Note: some features may need a manual test.</p>
<p><em>Previous versions</em>:
<a href="https://github.com/ganlanyuan/tiny-slider/tree/v1">v1</a>,
<a href="https://github.com/ganlanyuan/tiny-slider/tree/v0">v0</a></p>
<h2>
<a id="user-content-contents" class="anchor" href="#contents" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Contents</h2>
<p>+ <a href="#whats-new">What's new</a><br>
+ <a href="#features">Features</a><br>
+ <a href="#install">Install</a><br>
+ <a href="#usage">Usage</a><br>
+ <a href="#options">Options</a><br>
+ <a href="#responsive-options">Responsive options</a><br>
+ <a href="#methods">Methods</a><br>
+ <a href="#custom-events">Custom Events</a><br>
+ <a href="#fallback">Fallback</a><br>
+ <a href="#browser-support">Browser Support</a><br>
+ <a href="#support">Support</a><br>
+ <a href="#license">License</a></p>
<h2>
<a id="user-content-whats-new" class="anchor" href="#whats-new" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>What's new</h2>
<ul>
<li>Using <code>%</code> instead of <code>px</code> (No more recalculation of each slide width on window resize)</li>
<li>Using CSS Mediaqueries if supported</li>
<li>Save browser capbility values to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" rel="nofollow">localStorage</a>, so they will not be recheck again until browser get upgraded or user clear the localStorage manuelly.</li>
<li>More options available for <code>responsive</code>. (Start from <a href="https://github.com/ganlanyuan/tiny-slider/releases/tag/v2.1.0">v2.1.0</a>, <a href="https://github.com/ganlanyuan/tiny-slider/issues/53">issue 53</a>)</li>
<li>Insert <code>controls</code> and <code>nav</code> <em>before</em> slider instead of after (<a href="https://github.com/ganlanyuan/tiny-slider/issues/4">issue 4</a>)</li>
<li>Move <code>autoplay</code> button out of <code>nav</code> container. (Start from <a href="https://github.com/ganlanyuan/tiny-slider/releases/tag/v2.1.0">v2.1.0</a>)</li>
<li>Some selector changes in <a href="https://github.com/ganlanyuan/tiny-slider/blob/master/src/tiny-slider.scss"><code>tiny-slider.scss</code></a>
</li>
</ul>
<p><em>Migrating to v2</em></p>
<ul>
<li>Update <code>controls</code> and / or <code>nav</code> styles based on their position changes.</li>
<li>Update the <a href="https://github.com/ganlanyuan/tiny-slider/blob/master/src/tiny-slider.scss"><code>slider selectors</code></a> accordingly if used in your CSS or JS.</li>
<li>Update styles related to <code>autoplay</code> button.</li>
</ul>
<p><em><a href="#tiny-slider-20">top↑</a></em></p>
<h2>
<a id="user-content-features" class="anchor" href="#features" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Features</h2>
<ul>
<li>carousel / gallery</li>
<li>responsive</li>
<li>fixed width</li>
<li>auto width (v2.8.1+)</li>
<li>vertical slider</li>
<li>gutter</li>
<li>edge padding (center)</li>
<li>loop</li>
<li>rewind (<a href="https://github.com/ganlanyuan/tiny-slider/pull/10">pull 10</a>)</li>
<li>slide by</li>
<li>customize controls / nav</li>
<li>lazyload</li>
<li>autoplay</li>
<li>auto height</li>
<li>touch support</li>
<li>mouse drag (<a href="https://github.com/ganlanyuan/tiny-slider/pull/32">pull 32</a>)</li>
<li>arrow keys</li>
<li>accessibility for people using keyboard navigation or screen readers (<a href="https://github.com/ganlanyuan/tiny-slider/issues/4">issue 4</a>)</li>
<li>response to visibility changing (<a href="https://github.com/ganlanyuan/tiny-slider/pull/29">pull 19</a>)</li>
<li>custom events</li>
<li>nested slider</li>
</ul>
<p><em><a href="#tiny-slider-20">top↑</a></em></p>
<h2>
<a id="user-content-install" class="anchor" href="#install" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Install</h2>
<p><code>bower install tiny-slider</code> or <code>npm install tiny-slider</code></p>
<h2>
<a id="user-content-usage" class="anchor" href="#usage" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Usage</h2>
<h4>
<a id="user-content-1-add-css-and-ie8-polyfills-if-needed" class="anchor" href="#1-add-css-and-ie8-polyfills-if-needed" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>1. Add CSS (and IE8 polyfills if needed)</h4>
<div class="highlight highlight-text-html-basic"><pre><<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">"</span>stylesheet<span class="pl-pds">"</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.1/tiny-slider.css<span class="pl-pds">"</span></span>>
<span class="pl-c"><span class="pl-c"><!--</span>[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.1/min/tiny-slider.helper.ie8.js"></script><![endif]<span class="pl-c">--></span></span></pre></div>
<h4>
<a id="user-content-2-add-markup" class="anchor" href="#2-add-markup" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>2. Add markup</h4>
<div class="highlight highlight-text-html-basic"><pre><<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>my-slider<span class="pl-pds">"</span></span>>
<<span class="pl-ent">div</span>></<span class="pl-ent">div</span>>
<<span class="pl-ent">div</span>></<span class="pl-ent">div</span>>
<<span class="pl-ent">div</span>></<span class="pl-ent">div</span>>
</<span class="pl-ent">div</span>>
<span class="pl-c"><span class="pl-c"><!--</span> or ul.my-slider > li <span class="pl-c">--></span></span></pre></div>
<h4>
<a id="user-content-3-call-tns" class="anchor" href="#3-call-tns" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>3. Call tns()</h4>
<p>Add tiny-slider.js to your page:</p>
<div class="highlight highlight-text-html-basic"><pre><<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.1/min/tiny-slider.js<span class="pl-pds">"</span></span>></<span class="pl-ent">script</span>>
<span class="pl-c"><span class="pl-c"><!--</span> NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> <span class="pl-c">--></span></span></pre></div>
<p>Or import <code>tns</code> via <code>webpack</code> or <code>rollup</code>:</p>
<div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> yourScript.js</span>
<span class="pl-k">import</span> { <span class="pl-smi">tns</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>./node_modules/tiny-slider/src/tiny-slider<span class="pl-pds">"</span></span></pre></div>
<p>Or you can even directly import <code>tns</code> start from v2.8.3</p>
<div class="highlight highlight-text-html-basic"><pre><<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>module<span class="pl-pds">"</span></span>><span class="pl-s1"></span>
<span class="pl-s1"> <span class="pl-k">import</span> {<span class="pl-smi">tns</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./src/tiny-slider.js<span class="pl-pds">'</span></span>;</span>
<span class="pl-s1"></span>
<span class="pl-s1"> <span class="pl-k">var</span> slider <span class="pl-k">=</span> <span class="pl-en">tns</span>({</span>
<span class="pl-s1"> container<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>.my-slider<span class="pl-pds">'</span></span>,</span>
<span class="pl-s1"> items<span class="pl-k">:</span> <span class="pl-c1">3</span>,</span>
<span class="pl-s1"> slideBy<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>page<span class="pl-pds">'</span></span>,</span>
<span class="pl-s1"> autoplay<span class="pl-k">:</span> <span class="pl-c1">true</span></span>
<span class="pl-s1"> });</span>
<span class="pl-s1"> </span><span class="pl-s1"><</span>/<span class="pl-ent">script</span>></pre></div>
<p><em><a href="#tiny-slider-20">top↑</a></em></p>
<h2>
<a id="user-content-options" class="anchor" href="#options" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Options</h2>
<table>
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>container</code></td>
<td>Node | String</td>
<td>Default: <code>'.slider'</code>. <br> The slider container element or selector.</td>
</tr>
<tr>
<td><code>mode</code></td>
<td>"carousel" | "gallery"</td>
<td>Default: "carousel". <br> Controls animation behaviour. <br> With <code>carousel</code> everything slides to the side, while <code>gallery</code> uses fade animations and changes all slides at once.</td>
</tr>
<tr>
<td><code>axis</code></td>
<td>"horizontal" | "vertical"</td>
<td>Default: "horizontal". <br> The axis of the slider.</td>
</tr>
<tr>
<td><code>items</code></td>
<td>positive number</td>
<td>Default: 1. <br> Number of slides being displayed in the viewport. <br> If slides less than <code>items</code>, the slider won't be initialized.</td>
</tr>
<tr>
<td><code>gutter</code></td>
<td>positive integer</td>
<td>Default: 0. <br> Space between slides (in "px").</td>
</tr>
<tr>
<td><code>edgePadding</code></td>
<td>positive integer</td>
<td>Default: 0. <br> Space on the outside (in "px").</td>
</tr>
<tr>
<td><code>fixedWidth</code></td>
<td>positive integer | false</td>
<td>Default: false. <br> Controls <code>width</code> attribute of the slides.</td>
</tr>
<tr>
<td><code>autoWidth</code></td>
<td>Boolean</td>
<td>Default: false. <br> If <code>true</code>, the width of each slide will be its natural width as a <code>inline-block</code> box.</td>
</tr>
<tr>
<td>
<code>viewportMax</code> (previously <code>fixedWidthViewportWidth</code>)</td>
<td>positive integer | false</td>
<td>Default: false. <br> Maximum viewport width for <code>fixedWidth</code>/<code>autoWidth</code>.</td>
</tr>
<tr>
<td><code>slideBy</code></td>
<td>positive number | "page"</td>
<td>Default: 1. <br> Number of slides going on one "click".</td>
</tr>
<tr>
<td><code>controls</code></td>
<td>Boolean</td>
<td>Default: true. <br> Controls the display and functionalities of <code>controls</code> components (prev/next buttons). If <code>true</code>, display the <code>controls</code> and add all functionalities.</td>
</tr>
<tr>
<td><code>controlsText</code></td>
<td>(Text | Markup) Array</td>
<td>Default: ["prev", "next"]. <br> Text or markup in the prev/next buttons.</td>
</tr>
<tr>
<td><code>controlsContainer</code></td>
<td>Node | String | false</td>
<td>Default: false. <br> The container element/selector around the prev/next buttons. <br> <code>controlsContainer</code> must have at least 2 child elements.</td>
</tr>
<tr>
<td><code>prevButton</code></td>
<td>Node | String | false</td>
<td>Default: false. <br> Customized previous buttons. <br> This option will be ignored if <code>controlsContainer</code> is a Node element or a CSS selector.</td>
</tr>
<tr>
<td><code>nextButton</code></td>
<td>Node | String | false</td>
<td>Default: false. <br> Customized next buttons. <br> This option will be ignored if <code>controlsContainer</code> is a Node element or a CSS selector.</td>
</tr>
<tr>
<td><code>nav</code></td>
<td>Boolean</td>
<td>Default: true. <br> Controls the display and functionalities of <code>nav</code> components (dots). If <code>true</code>, display the <code>nav</code> and add all functionalities.</td>
</tr>
<tr>
<td><code>navContainer</code></td>
<td>Node | String | false</td>
<td>Default: false. <br> The container element/selector around the dots. <br> <code>navContainer</code> must have at least same number of children as the slides.</td>
</tr>
<tr>
<td><code>navAsThumbnails</code></td>
<td>Boolean</td>
<td>Default: false. <br> Indecate if the dots are thurbnails. If <code>true</code>, they will always be visible even when more than 1 slides displayed in the viewport.</td>
</tr>
<tr>
<td><code>arrowKeys</code></td>
<td>Boolean</td>
<td>Default: false. <br> Allows using arrow keys to switch slides.</td>
</tr>
<tr>
<td><code>speed</code></td>
<td>positive integer</td>
<td>Default: 300. <br> Speed of the slide animation (in "ms").</td>
</tr>
<tr>
<td><code>autoplay</code></td>
<td>Boolean</td>
<td>Default: false. <br> Toggles the automatic change of slides.</td>
</tr>
<tr>
<td><code>autoplayTimeout</code></td>
<td>positive integer</td>
<td>Default: 5000. <br> Time between 2 <code>autoplay</code> slides change (in "ms").</td>
</tr>
<tr>
<td><code>autoplayDirection</code></td>
<td>"forward" | "backward"</td>
<td>Default: "forward". <br> Direction of slide movement (ascending/descending the slide index).</td>
</tr>
<tr>
<td><code>autoplayText</code></td>
<td>Array (Text | Markup)</td>
<td>Default: ["start", "stop"]. <br> Text or markup in the autoplay start/stop button.</td>
</tr>
<tr>
<td><code>autoplayHoverPause</code></td>
<td>Boolean</td>
<td>Default: false. <br> Stops sliding on mouseover.</td>
</tr>
<tr>
<td><code>autoplayButton</code></td>
<td>Node | String | false</td>
<td>Default: false. <br> The customized autoplay start/stop button or selector.</td>
</tr>
<tr>
<td><code>autoplayButtonOutput</code></td>
<td>Boolean</td>
<td>Default: true. <br> Output <code>autoplayButton</code> markup when <code>autoplay</code> is true but a customized <code>autoplayButton</code> is not provided.</td>
</tr>
<tr>
<td><code>autoplayResetOnVisibility</code></td>
<td>Boolean</td>
<td>Default: true. <br> Pauses the sliding when the page is invisiable and resumes it when the page become visiable again. (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API" rel="nofollow">Page Visibility API</a>)</td>
</tr>
<tr>
<td><code>animateIn</code></td>
<td>String</td>
<td>Default: "tns-fadeIn". <br> Name of intro animation <code>class</code>.</td>
</tr>
<tr>
<td><code>animateOut</code></td>
<td>String</td>
<td>Default: "tns-fadeOut". <br> Name of outro animation <code>class</code>.</td>
</tr>
<tr>
<td><code>animateNormal</code></td>
<td>String</td>
<td>Default: "tns-normal". <br> Name of default animation <code>class</code>.</td>
</tr>
<tr>
<td><code>animateDelay</code></td>
<td>positive integer | false</td>
<td>Default: false. <br> Time between each <code>gallery</code> animation (in "ms").</td>
</tr>
<tr>
<td><code>loop</code></td>
<td>Boolean</td>
<td>Default: true. <br> Moves throughout all the slides seamlessly.</td>
</tr>
<tr>
<td><code>rewind</code></td>
<td>Boolean</td>
<td>Default: false. <br> Moves to the opposite edge when reaching the first or last slide.</td>
</tr>
<tr>
<td><code>autoHeight</code></td>
<td>Boolean</td>
<td>Default: false. <br> Height of slider container changes according to each slide's height.</td>
</tr>
<tr>
<td><code>responsive</code></td>
<td>Map: { <br> breakpoint: { <br> key: value<br> } <br>} | false</td>
<td>Default: false. <br>Breakpoint: Integer.<br>Defines options for different viewport widths (see <a href="#responsive-options">Responsive Options</a>). <br>
</td>
</tr>
<tr>
<td><code>lazyload</code></td>
<td>Boolean</td>
<td>Default: false. <br> Enables lazyloading images that are currently not viewed, thus saving bandwidth (see <a href="http://ganlanyuan.github.io/tiny-slider/tests/#lazyload_wrapper" rel="nofollow">demo</a>). <br> NOTE: <code>width</code> attribute for each <code><img></code> is required for <code>autoWidth</code> slider.</td>
</tr>
<tr>
<td><code>touch</code></td>
<td>Boolean</td>
<td>Default: true. <br> Activates input detection for touch devices.</td>
</tr>
<tr>
<td><code>mouseDrag</code></td>
<td>Boolean</td>
<td>Default: false. <br> Changing slides by dragging them.</td>
</tr>
<tr>
<td><code>swipeAngle</code></td>
<td>positive integer | Boolean</td>
<td>Default: 15. <br> Swipe or drag will not be triggered if the angle is not inside the range when set.</td>
</tr>
<tr>
<td><code>nested</code></td>
<td>"inner" | "outer" | false</td>
<td>Default: false. <br> Difine the relationship between nested sliders. (see <a href="http://ganlanyuan.github.io/tiny-slider/tests/#nested_wrapper" rel="nofollow">demo</a>) <br>Make sure you run the inner slider first, otherwise the height of the inner slider container will be wrong.</td>
</tr>
<tr>
<td><code>freezable</code></td>
<td>Boolean</td>
<td>Default: true. <br> Indicate whether the slider will be frozen (<code>controls</code>, <code>nav</code>, <code>autoplay</code> and other functions will stop work) when all slides can be displayed in one page.</td>
</tr>
<tr>
<td><code>disable</code></td>
<td>Boolean</td>
<td>Default: false. <br> Disable slider.</td>
</tr>
<tr>
<td><code>startIndex</code></td>
<td>positive integer</td>
<td>Default: 0. <br> The initial <code>index</code> of the slider.</td>
</tr>
<tr>
<td><code>onInit</code></td>
<td>Function | false</td>
<td>Default: false. <br> Callback to be run on initialization.</td>
</tr>
<tr>
<td><code>useLocalStorage</code></td>
<td>Boolean</td>
<td>Default: true. <br> Save browser capability variables to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" rel="nofollow">localStorage</a> and without detecting them everytime the slider runs if set to <code>true</code>.</td>
</tr>
</tbody>
</table>
<p>NOTE:<br>
Prior to v2.0.2, options "container", "controlsContainer", "navContainer" and "autoplayButton" still need to be DOM elements.<br>
E.g. container: document.querySelector('.my-slider')</p>
<p><em><a href="#tiny-slider-20">top↑</a></em></p>
<h2>
<a id="user-content-responsive-options" class="anchor" href="#responsive-options" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Responsive options</h2>
<p>The following options can be redefined in <code>responsive</code> field:<br>
<code>startIndex</code>,<br>
<code>items</code>,<br>
<code>slideBy</code>,<br>
<code>speed</code>,<br>
<code>autoHeight</code>,<br>
<code>fixedWidth</code>,<br>
<code>edgePadding</code>,<br>
<code>gutter</code>,<br>
<code>controls</code>,<br>
<code>controlsText</code>,<br>
<code>nav</code>,<br>
<code>autoplay</code>,<br>
<code>autoplayHoverPause</code>,<br>
<code>autoplayResetOnVisibility</code>,<br>
<code>autoplayText</code>,<br>
<code>autoplayTimeout</code>,<br>
<code>touch</code>,<br>
<code>mouseDrag</code>,<br>
<code>arrowKeys</code>,<br>
<code>disable</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k"><</span>script<span class="pl-k">></span>
<span class="pl-k">var</span> slider <span class="pl-k">=</span> <span class="pl-en">tns</span>({
container<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>.my-slider<span class="pl-pds">'</span></span>,
items<span class="pl-k">:</span> <span class="pl-c1">1</span>,
responsive<span class="pl-k">:</span> {
<span class="pl-c1">640</span><span class="pl-k">:</span> {
edgePadding<span class="pl-k">:</span> <span class="pl-c1">20</span>,
gutter<span class="pl-k">:</span> <span class="pl-c1">20</span>,
items<span class="pl-k">:</span> <span class="pl-c1">2</span>
},
<span class="pl-c1">700</span><span class="pl-k">:</span> {
gutter<span class="pl-k">:</span> <span class="pl-c1">30</span>
},
<span class="pl-c1">900</span><span class="pl-k">:</span> {
items<span class="pl-k">:</span> <span class="pl-c1">3</span>
}
}
});
<span class="pl-k"><</span><span class="pl-k">/</span>script<span class="pl-k">></span></pre></div>
<p>NOTE: <code>fixedWidth</code> can only be changed to other positive integers. It can't be changed to negtive integer, 0 or other data type.
<em><a href="#tiny-slider-20">top↑</a></em></p>
<h2>
<a id="user-content-methods" class="anchor" href="#methods" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Methods</h2>
<p>The slider returns a slider object with some properties and methods once it's initialized:</p>
<div class="highlight highlight-source-js"><pre>{
getInfo<span class="pl-k">:</span> <span class="pl-en">info</span>(),
events<span class="pl-k">:</span> events, <span class="pl-c"><span class="pl-c">//</span> Object</span>
goTo<span class="pl-k">:</span> <span class="pl-en">goTo</span>(),
play<span class="pl-k">:</span> <span class="pl-en">play</span>(),
pause<span class="pl-k">:</span> <span class="pl-en">pause</span>(),
isOn<span class="pl-k">:</span> isOn, <span class="pl-c"><span class="pl-c">//</span> Boolean</span>
rebuild<span class="pl-k">:</span> <span class="pl-en">rebuild</span>(),
destroy<span class="pl-k">:</span> <span class="pl-en">destroy</span>()
}</pre></div>
<p>To get the slider information, you can either use the <code>getInfo()</code> method or subscribe to an Event. Both return an Object:</p>
<div class="highlight highlight-source-js"><pre>{
container<span class="pl-k">:</span> container, <span class="pl-c"><span class="pl-c">//</span> slider container</span>
slideItems<span class="pl-k">:</span> slideItems, <span class="pl-c"><span class="pl-c">//</span> slides list</span>
navContainer<span class="pl-k">:</span> navContainer, <span class="pl-c"><span class="pl-c">//</span> nav container</span>
navItems<span class="pl-k">:</span> navItems, <span class="pl-c"><span class="pl-c">//</span> dots list</span>
controlsContainer<span class="pl-k">:</span> controlsContainer, <span class="pl-c"><span class="pl-c">//</span> controls container</span>
hasControls<span class="pl-k">:</span> hasControls, <span class="pl-c"><span class="pl-c">//</span> indicate if controls exist</span>
prevButton<span class="pl-k">:</span> prevButton, <span class="pl-c"><span class="pl-c">//</span> previous button</span>
nextButton<span class="pl-k">:</span> nextButton, <span class="pl-c"><span class="pl-c">//</span> next button</span>
items<span class="pl-k">:</span> items, <span class="pl-c"><span class="pl-c">//</span> items on a page</span>
slideBy<span class="pl-k">:</span> slideBy <span class="pl-c"><span class="pl-c">//</span> items slide by</span>
cloneCount<span class="pl-k">:</span> cloneCount, <span class="pl-c"><span class="pl-c">//</span> cloned slide count</span>
slideCount<span class="pl-k">:</span> slideCount, <span class="pl-c"><span class="pl-c">//</span> original slide count</span>
slideCountNew<span class="pl-k">:</span> slideCountNew, <span class="pl-c"><span class="pl-c">//</span> total slide count after initialization</span>
index<span class="pl-k">:</span> index, <span class="pl-c"><span class="pl-c">//</span> current index</span>
indexCached<span class="pl-k">:</span> indexCached, <span class="pl-c"><span class="pl-c">//</span> previous index</span>
navCurrent<span class="pl-k">:</span> navCurrent, <span class="pl-c"><span class="pl-c">//</span> current dot index</span>
navCurrentCached<span class="pl-k">:</span> navCurrentCached, <span class="pl-c"><span class="pl-c">//</span> previous dot index</span>
visibleNavIndexes<span class="pl-k">:</span> visibleNavIndexes, <span class="pl-c"><span class="pl-c">//</span> visible nav indexes</span>
visibleNavIndexesCached<span class="pl-k">:</span> visibleNavIndexesCached,
sheet<span class="pl-k">:</span> sheet,
<span class="pl-c1">event</span><span class="pl-k">:</span> e <span class="pl-k">||</span> {}, <span class="pl-c"><span class="pl-c">//</span> event object if available</span>
};</pre></div>
<h4>
<a id="user-content-getinfo" class="anchor" href="#getinfo" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>getInfo</h4>
<p>Get slider information.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-smi">slider</span>.<span class="pl-en">getInfo</span>();
<span class="pl-c1">document</span>.<span class="pl-c1">querySelector</span>(<span class="pl-s"><span class="pl-pds">'</span>.next-button<span class="pl-pds">'</span></span>).<span class="pl-en">onclick</span> <span class="pl-k">=</span> <span class="pl-k">function</span> () {
<span class="pl-c"><span class="pl-c">//</span> get slider info</span>
<span class="pl-k">var</span> info <span class="pl-k">=</span> <span class="pl-smi">slider</span>.<span class="pl-en">getInfo</span>(),
indexPrev <span class="pl-k">=</span> <span class="pl-smi">info</span>.<span class="pl-smi">indexCached</span>,
indexCurrent <span class="pl-k">=</span> <span class="pl-smi">info</span>.<span class="pl-c1">index</span>;
<span class="pl-c"><span class="pl-c">//</span> update style based on index</span>
<span class="pl-smi">info</span>.<span class="pl-smi">slideItems</span>[indexPrev].<span class="pl-smi">classList</span>.<span class="pl-c1">remove</span>(<span class="pl-s"><span class="pl-pds">'</span>active<span class="pl-pds">'</span></span>);
<span class="pl-smi">info</span>.<span class="pl-smi">slideItems</span>[indexCurrent].<span class="pl-smi">classList</span>.<span class="pl-c1">add</span>(<span class="pl-s"><span class="pl-pds">'</span>active<span class="pl-pds">'</span></span>);
};</pre></div>
<h4>
<a id="user-content-goto" class="anchor" href="#goto" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>goTo</h4>
<p>Go to specific slide by number or keywords.<br>
(NOTE: the number in <code>goTo()</code> was 1 based)</p>
<div class="highlight highlight-source-js"><pre><span class="pl-smi">slider</span>.<span class="pl-en">goTo</span>(<span class="pl-c1">3</span>);
<span class="pl-smi">slider</span>.<span class="pl-en">goTo</span>(<span class="pl-s"><span class="pl-pds">'</span>prev<span class="pl-pds">'</span></span>);
<span class="pl-smi">slider</span>.<span class="pl-en">goTo</span>(<span class="pl-s"><span class="pl-pds">'</span>next<span class="pl-pds">'</span></span>);
<span class="pl-smi">slider</span>.<span class="pl-en">goTo</span>(<span class="pl-s"><span class="pl-pds">'</span>first<span class="pl-pds">'</span></span>);
<span class="pl-smi">slider</span>.<span class="pl-en">goTo</span>(<span class="pl-s"><span class="pl-pds">'</span>last<span class="pl-pds">'</span></span>);
<span class="pl-c1">document</span>.<span class="pl-c1">querySelector</span>(<span class="pl-s"><span class="pl-pds">'</span>.goto-button<span class="pl-pds">'</span></span>).<span class="pl-en">onclick</span> <span class="pl-k">=</span> <span class="pl-k">function</span> () {
<span class="pl-smi">slider</span>.<span class="pl-en">goTo</span>(<span class="pl-c1">3</span>);
};</pre></div>
<h4>
<a id="user-content-play" class="anchor" href="#play" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>play</h4>
<p>Programmatically start slider autoplay when <code>autoplay: true</code>.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-smi">slider</span>.<span class="pl-c1">play</span>();</pre></div>
<h4>
<a id="user-content-pause" class="anchor" href="#pause" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>pause</h4>
<p>Programmatically stop slider autoplay when <code>autoplay: true</code>.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-smi">slider</span>.<span class="pl-c1">pause</span>();</pre></div>
<h4>
<a id="user-content-destroy" class="anchor" href="#destroy" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>destroy</h4>
<p>Destroy the slider.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-smi">slider</span>.<span class="pl-en">destroy</span>();</pre></div>
<h4>
<a id="user-content-rebuild" class="anchor" href="#rebuild" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>rebuild</h4>
<p>Rebuild the slider after destroy.</p>
<div class="highlight highlight-source-js"><pre>slider <span class="pl-k">=</span> <span class="pl-smi">slider</span>.<span class="pl-en">rebuild</span>();
<span class="pl-c"><span class="pl-c">//</span> this method returns a new slider Object with the same options with the original slider</span></pre></div>
<h2>
<a id="user-content-custom-events" class="anchor" href="#custom-events" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Custom Events</h2>
<p>Available events include: <code>indexChanged</code>, <code>transitionStart</code>, <code>transitionEnd</code>, <code>touchStart</code>, <code>touchMove</code>, <code>touchEnd</code>, <code>dragStart</code>, <code>dragMove</code> and <code>dragEnd</code>.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> <span class="pl-en">customizedFunction</span> <span class="pl-k">=</span> <span class="pl-k">function</span> (<span class="pl-smi">info</span>) {
<span class="pl-c"><span class="pl-c">//</span> direct access to info object</span>
<span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-smi">info</span>.<span class="pl-c1">event</span>.<span class="pl-c1">type</span>, <span class="pl-smi">info</span>.<span class="pl-smi">container</span>.<span class="pl-c1">id</span>);
}
<span class="pl-c"><span class="pl-c">//</span> bind function to event</span>
<span class="pl-smi">slider</span>.<span class="pl-smi">events</span>.<span class="pl-en">on</span>(<span class="pl-s"><span class="pl-pds">'</span>transitionEnd<span class="pl-pds">'</span></span>, customizedFunction);
<span class="pl-c"><span class="pl-c">//</span> remove function binding</span>
<span class="pl-smi">slider</span>.<span class="pl-smi">events</span>.<span class="pl-en">off</span>(<span class="pl-s"><span class="pl-pds">'</span>transitionEnd<span class="pl-pds">'</span></span>, customizedFunction);</pre></div>
<p><em><a href="#tiny-slider-20">top↑</a></em></p>
<h4>
<a id="user-content-fallback" class="anchor" href="#fallback" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Fallback</h4>
<div class="highlight highlight-source-css"><pre><span class="pl-e">.no-js</span> <span class="pl-e">.your-slider</span> { <span class="pl-c1"><span class="pl-c1">overflow-x</span></span>: <span class="pl-c1">auto</span>; }
<span class="pl-e">.no-js</span> <span class="pl-e">.your-slider</span> <span class="pl-k">></span> <span class="pl-ent">div</span> { <span class="pl-c1"><span class="pl-c1">float</span></span>: <span class="pl-c1">none</span>; }</pre></div>
<h2>
<a id="user-content-browser-support" class="anchor" href="#browser-support" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Browser Support</h2>
<p>Firefox 8+ ✓<br>
Chrome 15+ ✓ (Should works on <em>Chrome 4-14</em> as well, but I couldn't test it.)<br>
Safari 4+ ✓<br>
Opera 12.1+ ✓<br>
IE 8+ ✓</p>
<h2>
<a id="user-content-support" class="anchor" href="#support" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Support</h2>
<p><a href="https://www.browserstack.com/" rel="nofollow"><img src="/Volumes/My%20iMac/ganlanyuan/tiny-slider/logos/browserstack.svg" alt="Browser Stack" width="170" style="max-width:100%;"></a><br>Live tests and Automated Tests <br>
<br>
<a href="https://crossbrowsertesting.com/" rel="nofollow"><img src="/Volumes/My%20iMac/ganlanyuan/tiny-slider/logos/cbt.svg" width="230" alt="Cross Browser Testing" style="max-width:100%;"></a><br>Live tests, Screenshots and Automated Tests <br>
<br>
<a href="https://cdnjs.com/" rel="nofollow">Cdnjs</a><br>
<br>
Images on demo page are from <a href="https://unsplash.com/" rel="nofollow">https://unsplash.com/</a>.</p>
<h2>
<a id="user-content-license" class="anchor" href="#license" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>License</h2>
<p>This project is available under the <a href="https://opensource.org/licenses/mit-license.php" rel="nofollow">MIT</a> license.</p>
</article></body></html>
Proudly Served by LiteSpeed Web Server at test.aquaai.org Port 80