GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes.

<div id=""> <a href="https://www.jsdelivr.com/package/npm/tiny-slider" rel="nofollow"><img src="https://camo.githubusercontent.com/441b83e404e19025ee1bcb45815082d4d7ea191220beff833d8a97812444662a/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f74696e792d736c696465722f62616467653f7374796c653d726f756e646564" alt="" data-canonical-src="https://data.jsdelivr.com/v1/package/npm/tiny-slider/badge?style=rounded"/></a> <a target="blank" rel="noopener noreferrer" href="https://camo.githubusercontent.com/c923d46825610fa7bf7ea23cf2a8f2ba617e6fc8d8147981f030f72321db52a5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56657273696f6e2d322e392e332d677265656e2e737667"><img src="https://camo.githubusercontent.com/c923d46825610fa7bf7ea23cf2a8f2ba617e6fc8d8147981f030f72321db52a5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56657273696f6e2d322e392e332d677265656e2e737667" alt="version" data-canonical-src="https://img.shields.io/badge/Version-2.9.3-green.svg"/></a> Tiny slider for all purposes, inspired by <a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-1">Owl Carousel</a><a href="#readabilityFootnoteLink-1" class="readability-DoNotFootnote" style="color: inherit;">[1]</a>. <a href="http://ganlanyuan.github.io/tiny-slider/demo" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-2">Demos</a><a href="#readabilityFootnoteLink-2" class="readability-DoNotFootnote" style="color: inherit;">[2]</a> <a href="http://ganlanyuan.github.io/tiny-slider/test" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-3">Test results</a><a href="#readabilityFootnoteLink-3" class="readability-DoNotFootnote" style="color: inherit;">[3]</a> Previous versions: <a href="https://github.com/ganlanyuan/tiny-slider/tree/v1">v1</a>, <a href="https://github.com/ganlanyuan/tiny-slider/tree/v0">v0</a> Warning: tiny-slider works with static content and it works in the browser only. If the HTML is loaded dynamically, make sure to call <code>tns()</code> after its loading. <h2><a id="user-content-contents" class="anchor" aria-hidden="true" href="#contents"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>Contents</h2> <h2><a id="user-content-whats-new" class="anchor" aria-hidden="true" href="#whats-new"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></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 capability values to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-4">localStorage</a><a href="#readabilityFootnoteLink-4" class="readability-DoNotFootnote" style="color: inherit;">[4]</a>, so they will not be recheck again until browser get upgraded or user clear the localStorage manually.</li> <li>More options available for <code>responsive</code>. (Start from <a href="https://github.com/ganlanyuan/tiny-slider/releases/tag/v2.1.0" style="color: inherit; text-decoration: none;" name="readabilityLink-5">v2.1.0</a><a href="#readabilityFootnoteLink-5" class="readability-DoNotFootnote" style="color: inherit;">[5]</a>, <a href="https://github.com/ganlanyuan/tiny-slider/issues/53" style="color: inherit; text-decoration: none;" name="readabilityLink-6">issue 53</a><a href="#readabilityFootnoteLink-6" class="readability-DoNotFootnote" style="color: inherit;">[6]</a>)</li> <li>Insert <code>controls</code> and <code>nav</code> before slider instead of after (<a href="https://github.com/ganlanyuan/tiny-slider/issues/4" style="color: inherit; text-decoration: none;" name="readabilityLink-7">issue 4</a><a href="#readabilityFootnoteLink-7" class="readability-DoNotFootnote" style="color: inherit;">[7]</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" style="color: inherit; text-decoration: none;" name="readabilityLink-8">v2.1.0</a><a href="#readabilityFootnoteLink-8" class="readability-DoNotFootnote" style="color: inherit;">[8]</a>)</li> <li>Some selector changes in <a href="https://github.com/ganlanyuan/tiny-slider/blob/master/src/tiny-slider.scss" style="color: inherit; text-decoration: none;" name="readabilityLink-9"><code>tiny-slider.scss</code></a><a href="#readabilityFootnoteLink-9" class="readability-DoNotFootnote" style="color: inherit;">[9]</a></li> </ul> Migrating to v2 <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" style="color: inherit; text-decoration: none;" name="readabilityLink-10"><code>slider selectors</code></a><a href="#readabilityFootnoteLink-10" class="readability-DoNotFootnote" style="color: inherit;">[10]</a> accordingly if used in your CSS or JS.</li> <li>Update styles related to <code>autoplay</code> button.</li> </ul> <a href="#tiny-slider-2" style="color: inherit; text-decoration: none;" name="readabilityLink-11">top↑</a><a href="#readabilityFootnoteLink-11" class="readability-DoNotFootnote" style="color: inherit;">[11]</a> <h2><a id="user-content-features" class="anchor" aria-hidden="true" href="#features"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>Features</h2> <table> <thead> <tr> <th rowspan="3"> </th> <th colspan="4">Carousel </th> <th rowspan="3">Gallery</th> </tr> <tr> <th colspan="3">Horizontal </th> <th rowspan="2">Vertical</th> </tr> <tr> <th>Percentage Width </th> <th>Fixed Width</th> <th>Auto Width</th> </tr> </thead> <tbody readability="1"> <tr> <td>Loop</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Rewind</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td> </td> </tr> <tr> <td>Slide by</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td> </td> </tr> <tr> <td>Gutter</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Edge padding</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td> </td> </tr> <tr> <td>Center (v2.9.2+)</td> <td>✓</td> <td>✓</td> <td>✓</td> <td> </td> <td> </td> </tr> <tr> <td>Responsive</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Lazyload</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Autoplay</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Auto height</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Touch/drag</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Arrow keys</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Customize controls/nav</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Accessibility</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr readability="2"> <td>Respond to DOM visibility changes</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Custom events</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Nested</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> </tbody> </table> Default <a href="#tiny-slider-2" style="color: inherit; text-decoration: none;" name="readabilityLink-12">top↑</a><a href="#readabilityFootnoteLink-12" class="readability-DoNotFootnote" style="color: inherit;">[12]</a> <h2><a id="user-content-install" class="anchor" aria-hidden="true" href="#install"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>Install</h2> <code>bower install tiny-slider</code> or <code>npm install tiny-slider</code> <h2><a id="user-content-usage" class="anchor" aria-hidden="true" href="#usage"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>Usage</h2> <h4><a id="user-content-1-add-css-and-ie8-polyfills-if-needed" class="anchor" aria-hidden="true" href="#1-add-css-and-ie8-polyfills-if-needed"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>1. Add CSS (and IE8 polyfills if needed)</h4> <div class="highlight highlight-text-html-basic" readability="34"><pre><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css"> </pre></div> <h4><a id="user-content-2-add-markup" class="anchor" aria-hidden="true" href="#2-add-markup"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>2. Add markup</h4> <div class="highlight highlight-text-html-basic" readability="32"><pre><div class="my-slider"> <div></div> <div></div> <div></div> </div> </pre></div> <h4><a id="user-content-3-call-tns" class="anchor" aria-hidden="true" href="#3-call-tns"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>3. Call tns()</h4> Option A: Add tiny-slider.js to your page: <div class="highlight highlight-text-html-basic" readability="33"><pre><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script> </pre></div> Option B: Import <code>tns</code> via <code>webpack</code> or <code>rollup</code>: <div class="highlight highlight-source-js" readability="7"><pre>// yourScript.js import { tns } from "./nodemodules/tiny-slider/src/tiny-slider"</pre></div> Option C: Import <code>tns</code> directly start from v2.8.2 <div class="highlight highlight-text-html-basic" readability="36"><pre><script type="module"> import {tns} from './src/tiny-slider.js'; var slider = tns({ container: '.my-slider', items: 3, slideBy: 'page', autoplay: true }); </script></pre></div> <a href="#tiny-slider-2" style="color: inherit; text-decoration: none;" name="readabilityLink-13">top↑</a><a href="#readabilityFootnoteLink-13" class="readability-DoNotFootnote" style="color: inherit;">[13]</a> <h2><a id="user-content-options" class="anchor" aria-hidden="true" href="#options"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>Options</h2> <table> <thead> <tr> <th>Option</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody readability="81.800743494424"> <tr readability="2"> <td><code>container</code></td> <td>Node | String</td> <td>Default: <code>'.slider'</code>. The slider container element or selector.</td> </tr> <tr readability="4"> <td><code>mode</code></td> <td>"carousel" | "gallery"</td> <td>Default: "carousel". Controls animation behaviour. 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 readability="4"> <td><code>axis</code></td> <td>"horizontal" | "vertical"</td> <td>Default: "horizontal". The axis of the slider.</td> </tr> <tr readability="4"> <td><code>items</code></td> <td>positive number</td> <td>Default: 1. Number of slides being displayed in the viewport. If slides less or equal than <code>items</code>, the slider won't be initialized.</td> </tr> <tr readability="2"> <td><code>gutter</code></td> <td>positive integer</td> <td>Default: 0. Space between slides (in "px").</td> </tr> <tr readability="2"> <td><code>edgePadding</code></td> <td>positive integer</td> <td>Default: 0. Space on the outside (in "px").</td> </tr> <tr readability="2"> <td><code>fixedWidth</code></td> <td>positive integer | false</td> <td>Default: false. Controls <code>width</code> attribute of the slides.</td> </tr> <tr readability="3"> <td><code>autoWidth</code></td> <td>Boolean</td> <td>Default: false. If <code>true</code>, the width of each slide will be its natural width as a <code>inline-block</code> box.</td> </tr> <tr readability="4"> <td><code>viewportMax</code> (was <code>fixedWidthViewportWidth</code>)</td> <td>positive integer | false</td> <td>Default: false. Maximum viewport width for <code>fixedWidth</code>/<code>autoWidth</code>.</td> </tr> <tr readability="2"> <td><code>slideBy</code></td> <td>positive number | "page"</td> <td>Default: 1. Number of slides going on one "click".</td> </tr> <tr readability="2"> <td><code>center</code> (v2.9.2+)</td> <td>Boolean</td> <td>Default: false. Center the active slide in the viewport.</td> </tr> <tr readability="7"> <td><code>controls</code></td> <td>Boolean</td> <td>Default: true. 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. For better accessibility, when a prev/next button is focused, user will be able to control the slider using left/right arrow keys.</td> </tr> <tr readability="2"> <td><code>controlsPosition</code></td> <td>"top" | "bottom"</td> <td>Default: "top". Controls <code>controls</code> position.</td> </tr> <tr readability="3"> <td><code>controlsText</code></td> <td>(Text | Markup) Array</td> <td>Default: ["prev", "next"]. Text or markup in the prev/next buttons.</td> </tr> <tr readability="3"> <td><code>controlsContainer</code></td> <td>Node | String | false</td> <td>Default: false. The container element/selector around the prev/next buttons. <code>controlsContainer</code> must have at least 2 child elements.</td> </tr> <tr readability="3"> <td><code>prevButton</code></td> <td>Node | String | false</td> <td>Default: false. Customized previous buttons. This option will be ignored if <code>controlsContainer</code> is a Node element or a CSS selector.</td> </tr> <tr readability="3"> <td><code>nextButton</code></td> <td>Node | String | false</td> <td>Default: false. Customized next buttons. This option will be ignored if <code>controlsContainer</code> is a Node element or a CSS selector.</td> </tr> <tr readability="4"> <td><code>nav</code></td> <td>Boolean</td> <td>Default: true. 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 readability="2"> <td><code>navPosition</code></td> <td>"top" | "bottom"</td> <td>Default: "top". Controls <code>nav</code> position.</td> </tr> <tr readability="3"> <td><code>navContainer</code></td> <td>Node | String | false</td> <td>Default: false. The container element/selector around the dots. <code>navContainer</code> must have at least same number of children as the slides.</td> </tr> <tr readability="4"> <td><code>navAsThumbnails</code></td> <td>Boolean</td> <td>Default: false. Indicate if the dots are thumbnails. If <code>true</code>, they will always be visible even when more than 1 slides displayed in the viewport.</td> </tr> <tr readability="2"> <td><code>arrowKeys</code></td> <td>Boolean</td> <td>Default: false. Allows using arrow keys to switch slides.</td> </tr> <tr readability="2"> <td><code>speed</code></td> <td>positive integer</td> <td>Default: 300. Speed of the slide animation (in "ms").</td> </tr> <tr readability="2"> <td><code>autoplay</code></td> <td>Boolean</td> <td>Default: false. Toggles the automatic change of slides.</td> </tr> <tr readability="2"> <td><code>autoplayPosition</code></td> <td>"top" | "bottom"</td> <td>Default: "top". Controls <code>autoplay</code> position.</td> </tr> <tr readability="2"> <td><code>autoplayTimeout</code></td> <td>positive integer</td> <td>Default: 5000. Time between 2 <code>autoplay</code> slides change (in "ms").</td> </tr> <tr readability="2"> <td><code>autoplayDirection</code></td> <td>"forward" | "backward"</td> <td>Default: "forward". Direction of slide movement (ascending/descending the slide index).</td> </tr> <tr readability="3"> <td><code>autoplayText</code></td> <td>Array (Text | Markup)</td> <td>Default: ["start", "stop"]. Text or markup in the autoplay start/stop button.</td> </tr> <tr readability="2"> <td><code>autoplayHoverPause</code></td> <td>Boolean</td> <td>Default: false. Stops sliding on mouseover.</td> </tr> <tr readability="2"> <td><code>autoplayButton</code></td> <td>Node | String | false</td> <td>Default: false. The customized autoplay start/stop button or selector.</td> </tr> <tr readability="3"> <td><code>autoplayButtonOutput</code></td> <td>Boolean</td> <td>Default: true. Output <code>autoplayButton</code> markup when <code>autoplay</code> is true but a customized <code>autoplayButton</code> is not provided.</td> </tr> <tr readability="4.4345238095238"> <td><code>autoplayResetOnVisibility</code></td> <td>Boolean</td> <td>Default: true. Pauses the sliding when the page is invisible and resumes it when the page become visiable again. (<a href="https://developer.mozilla.org/en-US/docs/Web/API/PageVisibilityAPI" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-14">Page Visibility API</a><a href="#readabilityFootnoteLink-14" class="readability-DoNotFootnote" style="color: inherit;">[14]</a>)</td> </tr> <tr readability="2"> <td><code>animateIn</code></td> <td>String</td> <td>Default: "tns-fadeIn". Name of intro animation <code>class</code>.</td> </tr> <tr readability="2"> <td><code>animateOut</code></td> <td>String</td> <td>Default: "tns-fadeOut". Name of outro animation <code>class</code>.</td> </tr> <tr readability="2"> <td><code>animateNormal</code></td> <td>String</td> <td>Default: "tns-normal". Name of default animation <code>class</code>.</td> </tr> <tr readability="2"> <td><code>animateDelay</code></td> <td>positive integer | false</td> <td>Default: false. Time between each <code>gallery</code> animation (in "ms").</td> </tr> <tr readability="2"> <td><code>loop</code></td> <td>Boolean</td> <td>Default: true. Moves throughout all the slides seamlessly.</td> </tr> <tr readability="2"> <td><code>rewind</code></td> <td>Boolean</td> <td>Default: false. Moves to the opposite edge when reaching the first or last slide.</td> </tr> <tr readability="2"> <td><code>autoHeight</code></td> <td>Boolean</td> <td>Default: false. Height of slider container changes according to each slide's height.</td> </tr> <tr readability="4.4886363636364"> <td><code>responsive</code></td> <td>Object: { breakpoint: { key: value } } | false</td> <td>Default: false. Breakpoint: Integer. Defines options for different viewport widths (see <a href="#responsive-options" style="color: inherit; text-decoration: none;" name="readabilityLink-15">Responsive Options</a>). <a href="#readabilityFootnoteLink-15" class="readability-DoNotFootnote" style="color: inherit;">[15]</a></td> </tr> <tr readability="5.937984496124"> <td><code>lazyload</code></td> <td>Boolean</td> <td>Default: false. Enables lazyloading images that are currently not viewed, thus saving bandwidth (see <a href="http://ganlanyuan.github.io/tiny-slider/demo/#lazyloadwrapper" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-16">demo</a><a href="#readabilityFootnoteLink-16" class="readability-DoNotFootnote" style="color: inherit;">[16]</a>). NOTE: + Class <code>.tns-lazy-img</code> need to be set on every image you want to lazyload if option <code>lazyloadSelector</code> is not specified; + <code>data-src</code> attribute with its value of the real image <code>src</code> is required; + <code>width</code> attribute for every image is required for <code>autoWidth</code> slider.</td> </tr> <tr readability="4"> <td><code>lazyloadSelector</code> (v2.9.1+)</td> <td>String</td> <td>Default: <code>'.tns-lazy-img'</code>. The CSS selector for lazyload images.</td> </tr> <tr readability="2"> <td><code>touch</code></td> <td>Boolean</td> <td>Default: true. Activates input detection for touch devices.</td> </tr> <tr readability="2"> <td><code>mouseDrag</code></td> <td>Boolean</td> <td>Default: false. Changing slides by dragging them.</td> </tr> <tr readability="4"> <td><code>swipeAngle</code></td> <td>positive integer | Boolean</td> <td>Default: 15. Swipe or drag will not be triggered if the angle is not inside the range when set.</td> </tr> <tr readability="4"> <td><code>preventActionWhenRunning</code> (v2.9.1+)</td> <td>Boolean</td> <td>Default: false. Prevent next transition while slider is transforming.</td> </tr> <tr readability="9"> <td><code>preventScrollOnTouch</code> (v2.9.1+)</td> <td>"auto" | "force" | false</td> <td>Default: false. Prevent page from scrolling on <code>touchmove</code>. If set to "auto", the slider will first check if the touch direction matches the slider axis, then decide whether prevent the page scrolling or not. If set to "force", the slider will always prevent the page scrolling.</td> </tr> <tr readability="5.8883720930233"> <td><code>nested</code></td> <td>"inner" | "outer" | false</td> <td>Default: false. Define the relationship between nested sliders. (see <a href="http://ganlanyuan.github.io/tiny-slider/demo/#nestedwrapper" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-17">demo</a><a href="#readabilityFootnoteLink-17" class="readability-DoNotFootnote" style="color: inherit;">[17]</a>) Make sure you run the inner slider first, otherwise the height of the inner slider container will be wrong.</td> </tr> <tr readability="5"> <td><code>freezable</code></td> <td>Boolean</td> <td>Default: true. 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 readability="2"> <td><code>disable</code></td> <td>Boolean</td> <td>Default: false. Disable slider.</td> </tr> <tr readability="2"> <td><code>startIndex</code></td> <td>positive integer</td> <td>Default: 0. The initial <code>index</code> of the slider.</td> </tr> <tr readability="2"> <td><code>onInit</code></td> <td>Function | false</td> <td>Default: false. Callback to be run on initialization.</td> </tr> <tr readability="2.7707006369427"> <td><code>useLocalStorage</code></td> <td>Boolean</td> <td>Default: true. Save browser capability variables to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-18">localStorage</a><a href="#readabilityFootnoteLink-18" class="readability-DoNotFootnote" style="color: inherit;">[18]</a> and without detecting them everytime the slider runs if set to <code>true</code>.</td> </tr> <tr readability="3"> <td><code>nonce</code></td> <td>String / false</td> <td>Default: false. Optional Nonce attribute for inline style tag to allow slider usage without `unsafe-inline Content Security Policy source.</td> </tr> </tbody> </table> NOTE: Prior to v2.0.2, options "container", "controlsContainer", "navContainer" and "autoplayButton" still need to be DOM elements. E.g. container: document.querySelector('.my-slider') <a href="#tiny-slider-2" style="color: inherit; text-decoration: none;" name="readabilityLink-19">top↑</a><a href="#readabilityFootnoteLink-19" class="readability-DoNotFootnote" style="color: inherit;">[19]</a> <h2><a id="user-content-responsive-options" class="anchor" aria-hidden="true" href="#responsive-options"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>Responsive options</h2> The following options can be redefined in <code>responsive</code> field: <code>startIndex</code>, <code>items</code>, <code>slideBy</code>, <code>speed</code>, <code>autoHeight</code>, <code>fixedWidth</code>, <code>edgePadding</code>, <code>gutter</code>, <code>center</code>, <code>controls</code>, <code>controlsText</code>, <code>nav</code>, <code>autoplay</code>, <code>autoplayHoverPause</code>, <code>autoplayResetOnVisibility</code>, <code>autoplayText</code>, <code>autoplayTimeout</code>, <code>touch</code>, <code>mouseDrag</code>, <code>arrowKeys</code>, <code>disable</code> <div class="highlight highlight-source-js" readability="14"><pre><script> var slider = tns({ container: '.my-slider', items: 1, responsive: { 640: { edgePadding: 20, gutter: 20, items: 2 }, 700: { gutter: 30 }, 900: { items: 3 } } }); </script></pre></div> NOTE: <ul> <li>The breakpoints behave like <code>(min-width: breakpoint)</code> in CSS, so an undefined option will be inherited from previous small breakpoints.</li> <li><code>fixedWidth</code> can only be changed to other positive integers. It can't be changed to negative integer, 0 or other data type. <a href="#tiny-slider-2" style="color: inherit; text-decoration: none;" name="readabilityLink-20">top↑</a><a href="#readabilityFootnoteLink-20" class="readability-DoNotFootnote" style="color: inherit;">[20]</a></li> </ul> <h2><a id="user-content-methods" class="anchor" aria-hidden="true" href="#methods"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>Methods</h2> The slider returns a slider object with some properties and methods once it's initialized: <div class="highlight highlight-source-js" readability="19"><pre>{ version: version, // tiny-slider version getInfo: info(), events: events, // Object goTo: goTo(), play: play(), pause: pause(), isOn: isOn, // Boolean updateSliderHeight: updateInnerWrapperHeight(), refresh: initSliderTransform(), destroy: destroy(), rebuild: rebuild() }</pre></div> To get the slider information, you can either use the <code>getInfo()</code> method or subscribe to an Event. Both return an Object: <div class="highlight highlight-source-js" readability="31"><pre>{ container: container, // slider container slideItems: slideItems, // slides list navContainer: navContainer, // nav container navItems: navItems, // dots list controlsContainer: controlsContainer, // controls container hasControls: hasControls, // indicate if controls exist prevButton: prevButton, // previous button nextButton: nextButton, // next button items: items, // items on a page slideBy: slideBy // items slide by cloneCount: cloneCount, // cloned slide count slideCount: slideCount, // original slide count slideCountNew: slideCountNew, // total slide count after initialization index: index, // current index indexCached: indexCached, // previous index displayIndex: getCurrentSlide(), // display index starts from 1 navCurrent: navCurrent, // current dot index navCurrentCached: navCurrentCached, // previous dot index pages: pages, // visible nav indexes pagesCached: pagesCached, sheet: sheet, event: e || {}, // event object if available };</pre></div> <h4><a id="user-content-getinfo" class="anchor" aria-hidden="true" href="#getinfo"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>getInfo</h4> Get slider information. <div class="highlight highlight-source-js" readability="12"><pre>slider.getInfo(); document.querySelector('.next-button').onclick = function () { // get slider info var info = slider.getInfo(), indexPrev = info.indexCached, indexCurrent = info.index; // update style based on index info.slideItems[indexPrev].classList.remove('active'); info.slideItems[indexCurrent].classList.add('active'); };</pre></div> <h4><a id="user-content-goto" class="anchor" aria-hidden="true" href="#goto"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>goTo</h4> Go to specific slide by number or keywords. <div class="highlight highlight-source-js" readability="8"><pre>slider.goTo(3); slider.goTo('prev'); slider.goTo('next'); slider.goTo('first'); slider.goTo('last'); document.querySelector('.goto-button').onclick = function () { slider.goTo(3); };</pre></div> <h4><a id="user-content-play" class="anchor" aria-hidden="true" href="#play"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>play</h4> Programmatically start slider autoplay when <code>autoplay: true</code>. <h4><a id="user-content-pause" class="anchor" aria-hidden="true" href="#pause"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>pause</h4> Programmatically stop slider autoplay when <code>autoplay: true</code>. <h4><a id="user-content-updatesliderheight" class="anchor" aria-hidden="true" href="#updatesliderheight"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>updateSliderHeight</h4> Manually adjust slider height when <code>autoHeight</code> is <code>true</code>. <div class="highlight highlight-source-js" readability="7"><pre>slider.updateSliderHeight();</pre></div> <h4><a id="user-content-destroy" class="anchor" aria-hidden="true" href="#destroy"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>destroy</h4> Destroy the slider. <h4><a id="user-content-rebuild" class="anchor" aria-hidden="true" href="#rebuild"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>rebuild</h4> Rebuild the slider after destroy. <div class="highlight highlight-source-js" readability="8"><pre>slider = slider.rebuild(); // this method returns a new slider Object with the same options with the original slider</pre></div> <h2><a id="user-content-custom-events" class="anchor" aria-hidden="true" href="#custom-events"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>Custom Events</h2> Available events include: <code>indexChanged</code>, <code>transitionStart</code>, <code>transitionEnd</code>, <code>newBreakpointStart</code>, <code>newBreakpointEnd</code>, <code>touchStart</code>, <code>touchMove</code>, <code>touchEnd</code>, <code>dragStart</code>, <code>dragMove</code> and <code>dragEnd</code>. <div class="highlight highlight-source-js" readability="14"><pre>var customizedFunction = function (info, eventName) { // direct access to info object console.log(info.event.type, info.container.id); } // bind function to event slider.events.on('transitionEnd', customizedFunction); // remove function binding slider.events.off('transitionEnd', customizedFunction);</pre></div> <a href="#tiny-slider-2" style="color: inherit; text-decoration: none;" name="readabilityLink-21">top↑</a><a href="#readabilityFootnoteLink-21" class="readability-DoNotFootnote" style="color: inherit;">[21]</a> <h4><a id="user-content-fallback" class="anchor" aria-hidden="true" href="#fallback"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>Fallback</h4> <div class="highlight highlight-source-css" readability="7"><pre>.no-js .your-slider { overflow-x: auto; } .no-js .your-slider > div { float: none; }</pre></div> <h2><a id="user-content-browser-support" class="anchor" aria-hidden="true" href="#browser-support"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>Browser Support</h2> Desktop: Firefox 8+ ✓ Chrome 15+ ✓ (Should works on Chrome 4-14 as well, but I couldn't test it.) Safari 4+ ✓ Opera 12.1+ ✓ IE 8+ ✓ Mobile: Android Browser 4.2+ ✓ Chrome Mobile 63+ ✓ Firefox Mobile 28+ ✓ Maxthon 4+ ✓ <h2><a id="user-content-support" class="anchor" aria-hidden="true" href="#support"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>Support</h2> <a href="https://www.browserstack.com/" rel="nofollow"><img src="/ganlanyuan/tiny-slider/raw/master/logos/browserstack.svg" alt="Browser Stack" width="170"/></a> Live tests and Automated Tests <a href="https://crossbrowsertesting.com/" rel="nofollow"><img src="/ganlanyuan/tiny-slider/raw/master/logos/cbt.svg" width="230" alt="Cross Browser Testing"/></a> Live tests, Screenshots and Automated Tests <a href="https://cdnjs.com/" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-22">Cdnjs</a><a href="#readabilityFootnoteLink-22" class="readability-DoNotFootnote" style="color: inherit;">[22]</a> Images on demo page are from <a href="https://unsplash.com/" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-23">https://unsplash.com/</a><a href="#readabilityFootnoteLink-23" class="readability-DoNotFootnote" style="color: inherit;">[23]</a>. <h2><a id="user-content-license" class="anchor" aria-hidden="true" href="#license"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a>License</h2> This project is available under the <a href="https://opensource.org/licenses/mit-license.php" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-24">MIT</a><a href="#readabilityFootnoteLink-24" class="readability-DoNotFootnote" style="color: inherit;">[24]</a> license. </div><div id="readability-footnotes"><h3>References</h3><ol id="readability-footnotes-list"><li><a href="#readabilityLink-1" title="Jump to Link in Article">^</a> <a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="nofollow" name="readabilityFootnoteLink-1">Owl Carousel</a> (owlcarousel2.github.io)</li><li><a href="#readabilityLink-2" title="Jump to Link in Article">^</a> <a href="http://ganlanyuan.github.io/tiny-slider/demo" rel="nofollow" name="readabilityFootnoteLink-2">Demos</a> (ganlanyuan.github.io)</li><li><a href="#readabilityLink-3" title="Jump to Link in Article">^</a> <a href="http://ganlanyuan.github.io/tiny-slider/test" rel="nofollow" name="readabilityFootnoteLink-3">Test results</a> (ganlanyuan.github.io)</li><li><a href="#readabilityLink-4" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" rel="nofollow" name="readabilityFootnoteLink-4">localStorage</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-5" title="Jump to Link in Article">^</a> <a href="https://github.com/ganlanyuan/tiny-slider/releases/tag/v2.1.0" name="readabilityFootnoteLink-5">v2.1.0</a> (github.com)</li><li><a href="#readabilityLink-6" title="Jump to Link in Article">^</a> <a href="https://github.com/ganlanyuan/tiny-slider/issues/53" name="readabilityFootnoteLink-6">issue 53</a> (github.com)</li><li><a href="#readabilityLink-7" title="Jump to Link in Article">^</a> <a href="https://github.com/ganlanyuan/tiny-slider/issues/4" name="readabilityFootnoteLink-7">issue 4</a> (github.com)</li><li><a href="#readabilityLink-8" title="Jump to Link in Article">^</a> <a href="https://github.com/ganlanyuan/tiny-slider/releases/tag/v2.1.0" name="readabilityFootnoteLink-8">v2.1.0</a> (github.com)</li><li><a href="#readabilityLink-9" title="Jump to Link in Article">^</a> <a href="https://github.com/ganlanyuan/tiny-slider/blob/master/src/tiny-slider.scss" name="readabilityFootnoteLink-9">tiny-slider.scss</a> (github.com)</li><li><a href="#readabilityLink-10" title="Jump to Link in Article">^</a> <a href="https://github.com/ganlanyuan/tiny-slider/blob/master/src/tiny-slider.scss" name="readabilityFootnoteLink-10">slider selectors</a> (github.com)</li><li><a href="#readabilityLink-11" title="Jump to Link in Article">^</a> <a href="#tiny-slider-2" name="readabilityFootnoteLink-11">top↑</a></li><li><a href="#readabilityLink-12" title="Jump to Link in Article">^</a> <a href="#tiny-slider-2" name="readabilityFootnoteLink-12">top↑</a></li><li><a href="#readabilityLink-13" title="Jump to Link in Article">^</a> <a href="#tiny-slider-2" name="readabilityFootnoteLink-13">top↑</a></li><li><a href="#readabilityLink-14" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/PageVisibilityAPI" rel="nofollow" name="readabilityFootnoteLink-14">Page Visibility API</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-15" title="Jump to Link in Article">^</a> <a href="#responsive-options" name="readabilityFootnoteLink-15">Responsive Options</a></li><li><a href="#readabilityLink-16" title="Jump to Link in Article">^</a> <a href="http://ganlanyuan.github.io/tiny-slider/demo/#lazyloadwrapper" rel="nofollow" name="readabilityFootnoteLink-16">demo</a> (ganlanyuan.github.io)</li><li><a href="#readabilityLink-17" title="Jump to Link in Article">^</a> <a href="http://ganlanyuan.github.io/tiny-slider/demo/#nestedwrapper" rel="nofollow" name="readabilityFootnoteLink-17">demo</a> (ganlanyuan.github.io)</li><li><a href="#readabilityLink-18" title="Jump to Link in Article">^</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" rel="nofollow" name="readabilityFootnoteLink-18">localStorage</a> (developer.mozilla.org)</li><li><a href="#readabilityLink-19" title="Jump to Link in Article">^</a> <a href="#tiny-slider-2" name="readabilityFootnoteLink-19">top↑</a></li><li><a href="#readabilityLink-20" title="Jump to Link in Article">^</a> <a href="#tiny-slider-2" name="readabilityFootnoteLink-20">top↑</a></li><li><a href="#readabilityLink-21" title="Jump to Link in Article">^</a> <a href="#tiny-slider-2" name="readabilityFootnoteLink-21">top↑</a></li><li><a href="#readabilityLink-22" title="Jump to Link in Article">^</a> <a href="https://cdnjs.com/" rel="nofollow" name="readabilityFootnoteLink-22">Cdnjs</a> (cdnjs.com)</li><li><a href="#readabilityLink-23" title="Jump to Link in Article">^</a> <a href="https://unsplash.com/" rel="nofollow" name="readabilityFootnoteLink-23">https://unsplash.com/</a> (unsplash.com)</li><li><a href="#readabilityLink-24" title="Jump to Link in Article">^</a> <a href="https://opensource.org/licenses/mit-license.php" rel="nofollow" name="readabilityFootnoteLink-24">MIT</a> (opensource.org)</li></ol></div>

keywords

No Items Found.

Add Comment

Other Items in webdev

Hugo Font Awesome Icons [ Icons ] - CSS Bundle Daily Dev Tips CSS Background Patterns by MagicPattern GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes. GitHub - jonasstrehle/supercookie: ⚠️ Browser fingerprinting via favicon! URL-encoder for SVG Bootstrap Icons · Official open source SVG icon library for Bootstrap GitHub - kognise/water.css: A drop-in collection of CSS styles to make simple websites just a little nicer Toggle light and dark themes in Bootstrap - DEV Deploy your Publish website for free on GitHub Pages - DEV Bootstrap · The most popular HTML, CSS, and JS library in the world. GitHub - diegocard/awesome-html5: A curated list of awesome HTML5 resources Fixing PHP SQLite database is locked warning - Unable to execute statement: database is locked [ php ] - KruXoR openstreetmap.org 50 Developer tools to make your life a little easier https://www.mrlacey.com/2020/07/youve-only-added-two-lines-why-did-that.html?m=1 GitHub - ForEvolve/bootstrap-dark: Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark! Responsive Web Design Online Testing - isResponsive Trianglify.io · Low Poly Pattern Generator Grid.js - Advanced table plugin HEAD - A free guide to <head> elements Roots | Modern WordPress Development Tools A Local Dev Tool For Every Project | Lando new.css Synchronized responsive testing, development, inspection | Vanamco Gold Price Charts Widgets | GoldBroker.com Trianglify.io · Low Poly Pattern Generator Special tags that Google understands - Search Console Help 404 Error Page Codepen ScrollMagic ♥ Demo AOS - Animate on scroll library Font Awesome v4.7.0 - Icon Search Tool Carbon Offers — LowEndTalk Featherlight – The ultra slim jQuery lightbox. Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs HEAD - A free guide to <head> elements API Blueprint | API Blueprint Filtering Data Client-Side: Comparing CSS, jQuery, and React | CSS-Tricks CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily - DEV Community 👩‍💻👨‍💻 Responsive Slider Timeline Colormind - the AI powered color palette generator Get Waves – Create SVG waves for your next design Nuxt.js - The Vue.js Framework CodeSandbox: Online Code Editor Tailored for Web Application Development Hover.css - A collection of CSS3 powered hover effects Live.js - One script closer to Designing in the Browser Color this sofa! – SVG + Blend Mode trick You Might Not Need jQuery

Other Categories in Linx

ai apps articles cloud apps code coffee factorio games hardware health iphone lists minecraft music pi security stock images stock images tech vpn web dev web developer websites windows ai android api apps articles asp audio australia bio bitcoin blog books bootstrap career charts code editors codepens cooking css css animations daily linx data day trips design design elements drawing education emulators entrepreneur factorio fitness flowcharts fonts foobar2000 themes games hardware headphones health home automation html templates icons itunes javascript jquery js linux mac maps media mhx minecraft misc money motivation music network news nginx os osrs pantheon parenting phone phones php pi products programming radio random reading reddit rs3 runescape seo shopping sqlite stock images storage tax tech technology text formatting tools trains video video editor videos wallpapers weather web web design web development web sites webdev windows wine wordpress workout youtube

Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Latest News

## 🚀 AI Giants Hit Bullseye: Anthropic & OpenAI Achieve Product-Market Fit Anthropic and OpenAI have reached a significant milestone, finding product-market fit with their AI technologies, which means their products effectively meet the needs of their customers, driving growth and adoption. This achievement showcases the practical value of their innovations, enabling businesses and individuals to leverage AI for enhanced productivity and efficiency. With this alignment of product and market needs, these companies are poised to transform industries and shape the future of technology.

GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes.

Add Comment

Other Items in webdev

Other Categories in Linx

Search Linx

Latest from Linx

Welcome

Random Quote

Latest News

Latest Articles

Code

Links

Quick Links

Quick Links

Sections