{"id":13575327,"url":"https://github.com/ganlanyuan/tiny-slider","last_synced_at":"2026-01-26T22:53:26.493Z","repository":{"id":41089494,"uuid":"47645724","full_name":"ganlanyuan/tiny-slider","owner":"ganlanyuan","description":"Vanilla javascript slider for all purposes.","archived":false,"fork":false,"pushed_at":"2024-08-02T13:33:56.000Z","size":54031,"stargazers_count":5333,"open_issues_count":391,"forks_count":788,"subscribers_count":72,"default_branch":"master","last_synced_at":"2026-01-18T12:14:27.412Z","etag":null,"topics":["carousel","slider"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ganlanyuan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-08T19:49:22.000Z","updated_at":"2026-01-17T20:02:37.000Z","dependencies_parsed_at":"2024-06-10T02:58:26.643Z","dependency_job_id":"e74eecc2-d2a6-4ffb-a383-b55e83fe103d","html_url":"https://github.com/ganlanyuan/tiny-slider","commit_stats":{"total_commits":1029,"total_committers":63,"mean_commits":"16.333333333333332","dds":0.5082604470359573,"last_synced_commit":"4d709735c417c2483e77a22d017fc1b18c04f0d4"},"previous_names":[],"tags_count":106,"template":false,"template_full_name":null,"purl":"pkg:github/ganlanyuan/tiny-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganlanyuan%2Ftiny-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganlanyuan%2Ftiny-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganlanyuan%2Ftiny-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganlanyuan%2Ftiny-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ganlanyuan","download_url":"https://codeload.github.com/ganlanyuan/tiny-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganlanyuan%2Ftiny-slider/sbom","scorecard":{"id":418262,"data":{"date":"2025-08-11","repo":{"name":"github.com/ganlanyuan/tiny-slider","commit":"4d709735c417c2483e77a22d017fc1b18c04f0d4"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.4,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":5,"reason":"Found 10/18 approved changesets -- score normalized to 5","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 22 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"61 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-6pw2-5hjv-9pf7","Warn: Project is vulnerable to: GHSA-4w2j-2rg4-5mjw","Warn: Project is vulnerable to: GHSA-mrgp-mrhc-5jrq","Warn: Project is vulnerable to: GHSA-7jxr-cg7f-gpgv","Warn: Project is vulnerable to: GHSA-xj72-wvfv-8985","Warn: Project is vulnerable to: GHSA-ch3r-j5x3-6q2m","Warn: Project is vulnerable to: GHSA-p5gc-c584-jj6v","Warn: Project is vulnerable to: GHSA-whpj-8f3w-67p5","Warn: Project is vulnerable to: GHSA-cchq-frgv-rjh5","Warn: Project is vulnerable to: GHSA-g644-9gfx-q4q4","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2","Warn: Project is vulnerable to: GHSA-9j49-mfvp-vmhm","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-4c7m-wxvm-r7gc","Warn: Project is vulnerable to: GHSA-pch5-whg9-qr2r","Warn: Project is vulnerable to: GHSA-px4h-xg32-q955","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-332q-7ff2-57h2","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T00:28:52.733Z","repository_id":41089494,"created_at":"2025-08-19T00:28:52.733Z","updated_at":"2025-08-19T00:28:52.733Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28791162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T21:49:50.245Z","status":"ssl_error","status_checked_at":"2026-01-26T21:48:29.455Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","slider"],"created_at":"2024-08-01T15:01:00.023Z","updated_at":"2026-01-26T22:53:26.476Z","avatar_url":"https://github.com/ganlanyuan.png","language":"HTML","funding_links":[],"categories":["HTML","UI Components"],"sub_categories":["Carousels"],"readme":"# Tiny Slider 2\n[![](https://data.jsdelivr.com/v1/package/npm/tiny-slider/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tiny-slider)\n![version](https://img.shields.io/badge/Version-2.9.4-green.svg)\n\nTiny slider for all purposes, inspired by [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/).\n\n[Demos](http://ganlanyuan.github.io/tiny-slider/demo)\n\n[Test results](http://ganlanyuan.github.io/tiny-slider/test)\n\u003c!-- [Tests for desktop browsers](http://ganlanyuan.github.io/tiny-slider/test/tests.html) (running on Firefox 12+, Chrome 15+, Safari 5.1+, Opera 12.1+, IE9+)\n[Tests for mobile browsers](http://ganlanyuan.github.io/tiny-slider/test/tests-mobile.html)  (running on Android Browser 4.2+)\n --\u003e\n\n*Previous versions*:\n[v1](https://github.com/ganlanyuan/tiny-slider/tree/v1),\n[v0](https://github.com/ganlanyuan/tiny-slider/tree/v0)\n\n**Warning**: tiny-slider works with static content and it works in the browser only. If the HTML is loaded dynamically, make sure to call `tns()` after its loading.\n\n## Contents\n+ [What's new](#whats-new)\n+ [Features](#features)\n+ [Install](#install)\n+ [Usage](#usage)\n+ [Options](#options)\n+ [Responsive options](#responsive-options)\n+ [Methods](#methods)\n+ [Custom Events](#custom-events)\n+ [Fallback](#fallback)\n+ [Browser Support](#browser-support)\n+ [Support](#support)\n+ [License](#license)\n\n## What's new\n- Using `%` instead of `px` (No more recalculation of each slide width on window resize)\n- Using CSS Mediaqueries if supported\n- Save browser capability values to [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), so they will not be recheck again until browser get upgraded or user clear the localStorage manually.\n- More options available for `responsive`. (Start from [v2.1.0](https://github.com/ganlanyuan/tiny-slider/releases/tag/v2.1.0), [issue 53](https://github.com/ganlanyuan/tiny-slider/issues/53))\n- Insert `controls` and `nav` _before_ slider instead of after ([issue 4](https://github.com/ganlanyuan/tiny-slider/issues/4))\n- Move `autoplay` button out of `nav` container. (Start from [v2.1.0](https://github.com/ganlanyuan/tiny-slider/releases/tag/v2.1.0))\n- Some selector changes in [`tiny-slider.scss`](https://github.com/ganlanyuan/tiny-slider/blob/master/src/tiny-slider.scss)\n\n*Migrating to v2*\n- Update `controls` and / or `nav` styles based on their position changes.\n- Update the [`slider selectors`](https://github.com/ganlanyuan/tiny-slider/blob/master/src/tiny-slider.scss) accordingly if used in your CSS or JS.\n- Update styles related to `autoplay` button.\n\n*[top↑](#tiny-slider-2)*\n\n## Features\n\u003ctable class=\"table\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth rowspan=\"3\"\u003e\u0026nbsp;\u003c/th\u003e\n      \u003cth colspan=\"4\"\u003eCarousel *\u003c/th\u003e\n      \u003cth rowspan=\"3\"\u003eGallery\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth colspan=\"3\"\u003eHorizontal *\u003c/th\u003e\n      \u003cth rowspan=\"2\"\u003eVertical\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth\u003ePercentage Width *\u003c/th\u003e\n      \u003cth\u003eFixed Width\u003c/th\u003e\n      \u003cth\u003eAuto Width\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eLoop\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eRewind\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e\u0026nbsp;\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eSlide by\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e\u0026nbsp;\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eGutter\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eEdge padding\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e\u0026nbsp;\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCenter (v2.9.2+)\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e\u0026nbsp;\u003c/td\u003e\n      \u003ctd\u003e\u0026nbsp;\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eResponsive\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eLazyload\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eAutoplay\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eAuto height\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eTouch/drag\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eArrow keys\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCustomize controls/nav\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eAccessibility\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eRespond to DOM visibility changes\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCustom events\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eNested\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n      \u003ctd\u003e✓\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\u003csmall\u003e* Default\u003c/small\u003e\n\n*[top↑](#tiny-slider-2)*\n\n## Install\n`bower install tiny-slider` or `npm install tiny-slider`\n\n## Usage\n#### 1. Add CSS (and IE8 polyfills if needed)\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css\"\u003e\n\u003c!--[if (lt IE 9)]\u003e\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js\"\u003e\u003c/script\u003e\u003c![endif]--\u003e\n```\n\n#### 2. Add markup\n```html\n\u003cdiv class=\"my-slider\"\u003e\n  \u003cdiv\u003e\u003c/div\u003e\n  \u003cdiv\u003e\u003c/div\u003e\n  \u003cdiv\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003c!-- or ul.my-slider \u003e li --\u003e\n```\n\n#### 3. Call tns()\nOption A: Add tiny-slider.js to your page:\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js\"\u003e\u003c/script\u003e\n\u003c!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in \u003cbody\u003e --\u003e\n```\n\nOption B: Import `tns` via `webpack` or `rollup`:\n```javascript\n// yourScript.js\nimport { tns } from \"./node_modules/tiny-slider/src/tiny-slider\"\n```\n\nOption C: Import `tns` directly start from v2.8.2\n```html\n\u003cscript type=\"module\"\u003e\n  import {tns} from './src/tiny-slider.js';\n\n  var slider = tns({\n    container: '.my-slider',\n    items: 3,\n    slideBy: 'page',\n    autoplay: true\n  });\n  \u003c/script\u003e\n```\n*[top↑](#tiny-slider-2)*\n\n## Options\n\n| Option | Type | Description |\n| --- | --- | --- |\n| `container` | Node \\| String | Default: `'.slider'`. \u003cbr\u003e The slider container element or selector. |\n| `mode` | \"carousel\" \\| \"gallery\" | Default: \"carousel\". \u003cbr\u003e Controls animation behaviour. \u003cbr\u003e With `carousel` everything slides to the side, while `gallery` uses fade animations and changes all slides at once. |\n| `axis` | \"horizontal\" \\| \"vertical\" | Default: \"horizontal\". \u003cbr\u003e The axis of the slider. |\n| `items` | positive number | Default: 1. \u003cbr\u003e Number of slides being displayed in the viewport. \u003cbr\u003e If slides less or equal than `items`, the slider won't be initialized. |\n| `gutter` | positive integer | Default: 0. \u003cbr\u003e Space between slides (in \"px\"). |\n| `edgePadding` | positive integer | Default: 0. \u003cbr\u003e Space on the outside (in \"px\"). |\n| `fixedWidth` | positive integer \\| false | Default: false. \u003cbr\u003e Controls `width` attribute of the slides. |\n| `autoWidth` | Boolean | Default: false. \u003cbr\u003e If `true`, the width of each slide will be its natural width as a `inline-block` box. |\n| `viewportMax` (was `fixedWidthViewportWidth`) | positive integer \\| false | Default: false. \u003cbr\u003e Maximum viewport width for `fixedWidth`/`autoWidth`. |\n| `slideBy` | positive number \\| \"page\" | Default: 1. \u003cbr\u003e Number of slides going on one \"click\". |\n| `center` (v2.9.2+) | Boolean | Default: false. \u003cbr\u003e Center the active slide in the viewport. |\n| `controls` | Boolean | Default: true. \u003cbr\u003e Controls the display and functionalities of `controls` components (prev/next buttons). If `true`, display the `controls` and add all functionalities. \u003cbr\u003eFor better accessibility, when a prev/next button is focused, user will be able to control the slider using left/right arrow keys.|\n| `controlsPosition` | \"top\" \\| \"bottom\" | Default: \"top\". \u003cbr\u003e Controls `controls` position. |\n| `controlsText` | (Text \\| Markup) Array | Default: [\"prev\", \"next\"]. \u003cbr\u003e Text or markup in the prev/next buttons. |\n| `controlsContainer` | Node \\| String \\| false | Default: false. \u003cbr\u003e The container element/selector around the prev/next buttons. \u003cbr\u003e `controlsContainer` must have at least 2 child elements. |\n| `prevButton` | Node \\| String \\| false | Default: false. \u003cbr\u003e Customized previous buttons. \u003cbr\u003e This option will be ignored if `controlsContainer` is a Node element or a CSS selector. |\n| `nextButton` | Node \\| String \\| false | Default: false. \u003cbr\u003e Customized next buttons. \u003cbr\u003e This option will be ignored if `controlsContainer` is a Node element or a CSS selector. |\n| `nav` | Boolean | Default: true. \u003cbr\u003e Controls the display and functionalities of `nav` components (dots). If `true`, display the `nav` and add all functionalities. |\n| `navPosition` | \"top\" \\| \"bottom\" | Default: \"top\". \u003cbr\u003e Controls `nav` position. |\n| `navContainer` | Node \\| String \\| false | Default: false. \u003cbr\u003e The container element/selector around the dots. \u003cbr\u003e `navContainer` must have at least same number of children as the slides. |\n| `navAsThumbnails` | Boolean | Default: false. \u003cbr\u003e Indicate if the dots are thumbnails. If `true`, they will always be visible even when more than 1 slides displayed in the viewport. |\n| `arrowKeys` | Boolean | Default: false. \u003cbr\u003e Allows using arrow keys to switch slides. |\n| `speed` | positive integer | Default: 300. \u003cbr\u003e Speed of the slide animation (in \"ms\"). |\n| `autoplay` | Boolean | Default: false. \u003cbr\u003e Toggles the automatic change of slides. |\n| `autoplayPosition` | \"top\" \\| \"bottom\" | Default: \"top\". \u003cbr\u003e Controls `autoplay` position. |\n| `autoplayTimeout` | positive integer | Default: 5000. \u003cbr\u003e Time between 2 `autoplay` slides change (in \"ms\"). |\n| `autoplayDirection` | \"forward\" \\| \"backward\" | Default: \"forward\". \u003cbr\u003e Direction of slide movement (ascending/descending the slide index). |\n| `autoplayText` | Array (Text \\| Markup) | Default: [\"start\", \"stop\"]. \u003cbr\u003e Text or markup in the autoplay start/stop button. |\n| `autoplayHoverPause` | Boolean | Default: false. \u003cbr\u003e Stops sliding on mouseover. |\n| `autoplayButton` | Node \\| String \\| false | Default: false. \u003cbr\u003e The customized autoplay start/stop button or selector. |\n| `autoplayButtonOutput` | Boolean | Default: true. \u003cbr\u003e Output `autoplayButton` markup when `autoplay` is true but a customized `autoplayButton` is not provided. |\n| `autoplayResetOnVisibility` | Boolean | Default: true. \u003cbr\u003e Pauses the sliding when the page is invisible and resumes it when the page become visiable again. ([Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)) |\n| `animateIn` | String | Default: \"tns-fadeIn\". \u003cbr\u003e Name of intro animation `class`. |\n| `animateOut` | String | Default: \"tns-fadeOut\". \u003cbr\u003e Name of outro animation `class`. |\n| `animateNormal` | String | Default: \"tns-normal\". \u003cbr\u003e Name of default animation `class`. |\n| `animateDelay` | positive integer \\| false | Default: false. \u003cbr\u003e Time between each `gallery` animation (in \"ms\"). |\n| `loop` | Boolean | Default: true. \u003cbr\u003e Moves throughout all the slides seamlessly. |\n| `rewind` | Boolean | Default: false. \u003cbr\u003e Moves to the opposite edge when reaching the first or last slide. |\n| `autoHeight` | Boolean | Default: false. \u003cbr\u003e Height of slider container changes according to each slide's height. |\n| `responsive` | Object: { \u003cbr\u003e\u0026emsp;breakpoint: { \u003cbr\u003e\u0026emsp;\u0026emsp;key: value\u003cbr\u003e\u0026emsp;} \u003cbr\u003e} \\| false | Default: false. \u003cbr\u003eBreakpoint: Integer.\u003cbr\u003eDefines options for different viewport widths (see [Responsive Options](#responsive-options)). \u003cbr\u003e |\n| `lazyload` | Boolean | Default: false. \u003cbr\u003e Enables lazyloading images that are currently not viewed, thus saving bandwidth (see [demo](http://ganlanyuan.github.io/tiny-slider/demo/#lazyload_wrapper)). \u003cbr\u003e NOTE: \u003cbr\u003e+ Class `.tns-lazy-img` need to be set on every image you want to lazyload if option `lazyloadSelector` is not specified; \u003cbr\u003e+ `data-src` attribute with its value of the real image `src` is required; \u003cbr\u003e+ `width` attribute for every image is required for `autoWidth` slider. |\n| `lazyloadSelector` (v2.9.1+) | String | Default: `'.tns-lazy-img'`. \u003cbr\u003e The CSS selector for lazyload images. |\n| `touch` | Boolean | Default: true. \u003cbr\u003e Activates input detection for touch devices. |\n| `mouseDrag` | Boolean | Default: false. \u003cbr\u003e Changing slides by dragging them. |\n| `swipeAngle` | positive integer \\| Boolean | Default: 15. \u003cbr\u003e Swipe or drag will not be triggered if the angle is not inside the range when set. |\n| `preventActionWhenRunning` (v2.9.1+) | Boolean | Default: false. \u003cbr\u003e Prevent next transition while slider is transforming. |\n| `preventScrollOnTouch` (v2.9.1+) | \"auto\" \\| \"force\" \\| false | Default: false. \u003cbr\u003e Prevent page from scrolling on `touchmove`. 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. |\n| `nested` | \"inner\" \\| \"outer\" \\| false | Default: false. \u003cbr\u003e Define the relationship between nested sliders. (see [demo](http://ganlanyuan.github.io/tiny-slider/demo/#nested_wrapper)) \u003cbr\u003eMake sure you run the inner slider first, otherwise the height of the inner slider container will be wrong. |\n| `freezable` | Boolean | Default: true. \u003cbr\u003e Indicate whether the slider will be frozen (`controls`, `nav`, `autoplay` and other functions will stop work) when all slides can be displayed in one page. |\n| `disable` | Boolean | Default: false. \u003cbr\u003e Disable slider. |\n| `startIndex` | positive integer | Default: 0. \u003cbr\u003e The initial `index` of the slider. |\n| `onInit` | Function \\| false | Default: false. \u003cbr\u003e Callback to be run on initialization. |\n| `useLocalStorage` | Boolean | Default: true. \u003cbr\u003e Save browser capability variables to [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and without detecting them everytime the slider runs if set to `true`. |\n| `nonce`| String / false | Default: false. \u003cbr\u003e Optional Nonce attribute for inline style tag to allow slider usage without `unsafe-inline Content Security Policy source. |\n\nNOTE:\nPrior to v2.0.2, options \"container\", \"controlsContainer\", \"navContainer\" and \"autoplayButton\" still need to be DOM elements.\nE.g. container: document.querySelector('.my-slider')\n\n*[top↑](#tiny-slider-2)*\n\n## Responsive options\nThe following options can be redefined in `responsive` field:\n`startIndex`,\n`items`,\n`slideBy`,\n`speed`,\n`autoHeight`,\n`fixedWidth`,\n`edgePadding`,\n`gutter`,\n`center`,\n`controls`,\n`controlsText`,\n`nav`,\n`autoplay`,\n`autoplayHoverPause`,\n`autoplayResetOnVisibility`,\n`autoplayText`,\n`autoplayTimeout`,\n`touch`,\n`mouseDrag`,\n`arrowKeys`,\n`disable`\n```javascript\n\u003cscript\u003e\n  var slider = tns({\n    container: '.my-slider',\n    items: 1,\n    responsive: {\n      640: {\n        edgePadding: 20,\n        gutter: 20,\n        items: 2\n      },\n      700: {\n        gutter: 30\n      },\n      900: {\n        items: 3\n      }\n    }\n  });\n\u003c/script\u003e\n```\nNOTE:\n+ The breakpoints behave like `(min-width: breakpoint)` in CSS, so an undefined option will be inherited from previous small breakpoints.\n+ `fixedWidth` can only be changed to other positive integers. It can't be changed to negative integer, 0 or other data type.\n*[top↑](#tiny-slider-2)*\n\n## Methods\nThe slider returns a slider object with some properties and methods once it's initialized:\n```javascript\n{\n  version: version, // tiny-slider version\n  getInfo: info(),\n  events: events, // Object\n  goTo: goTo(),\n  play: play(),\n  pause: pause(),\n  isOn: isOn, // Boolean\n  updateSliderHeight: updateInnerWrapperHeight(),\n  refresh: initSliderTransform(),\n  destroy: destroy(),\n  rebuild: rebuild()\n}\n```\nTo get the slider information, you can either use the `getInfo()` method or subscribe to an Event. Both return an Object:\n```javascript\n{\n                container: container, // slider container\n               slideItems: slideItems, // slides list\n             navContainer: navContainer, // nav container\n                 navItems: navItems, // dots list\n        controlsContainer: controlsContainer, // controls container\n              hasControls: hasControls, // indicate if controls exist\n               prevButton: prevButton, // previous button\n               nextButton: nextButton, // next button\n                    items: items, // items on a page\n                  slideBy: slideBy // items slide by\n               cloneCount: cloneCount, // cloned slide count\n               slideCount: slideCount, // original slide count\n            slideCountNew: slideCountNew, // total slide count after initialization\n                    index: index, // current index\n              indexCached: indexCached, // previous index\n             displayIndex: getCurrentSlide(), // display index starts from 1\n               navCurrent: navCurrent, // current dot index\n         navCurrentCached: navCurrentCached, // previous dot index\n                    pages: pages, // visible nav indexes\n              pagesCached: pagesCached,\n                    sheet: sheet,\n                    event: e || {}, // event object if available\n};\n```\n\n#### getInfo\nGet slider information.\n```javascript\nslider.getInfo();\n\ndocument.querySelector('.next-button').onclick = function () {\n  // get slider info\n  var info = slider.getInfo(),\n      indexPrev = info.indexCached,\n      indexCurrent = info.index;\n\n  // update style based on index\n  info.slideItems[indexPrev].classList.remove('active');\n  info.slideItems[indexCurrent].classList.add('active');\n};\n```\n\n#### goTo\nGo to specific slide by number or keywords.\n```javascript\nslider.goTo(3);\nslider.goTo('prev');\nslider.goTo('next');\nslider.goTo('first');\nslider.goTo('last');\n\ndocument.querySelector('.goto-button').onclick = function () {\n  slider.goTo(3);\n};\n```\n\n#### play\nProgrammatically start slider autoplay when `autoplay: true`.\n```javascript\nslider.play();\n```\n\n#### pause\nProgrammatically stop slider autoplay when `autoplay: true`.\n```javascript\nslider.pause();\n```\n\n#### updateSliderHeight\nManually adjust slider height when `autoHeight` is `true`.\n```javascript\nslider.updateSliderHeight();\n```\n\n#### destroy\nDestroy the slider.\n```javascript\nslider.destroy();\n```\n\n#### rebuild\nRebuild the slider after destroy.\n```javascript\nslider = slider.rebuild();\n// this method returns a new slider Object with the same options with the original slider\n```\n\n## Custom Events\nAvailable events include: `indexChanged`, `transitionStart`, `transitionEnd`, `newBreakpointStart`, `newBreakpointEnd`, `touchStart`, `touchMove`, `touchEnd`, `dragStart`, `dragMove` and `dragEnd`.\n```javascript\nvar customizedFunction = function (info, eventName) {\n  // direct access to info object\n  console.log(info.event.type, info.container.id);\n}\n\n// bind function to event\nslider.events.on('transitionEnd', customizedFunction);\n\n// remove function binding\nslider.events.off('transitionEnd', customizedFunction);\n```\n*[top↑](#tiny-slider-2)*\n\n#### Fallback\n```css\n.no-js .your-slider { overflow-x: auto; }\n.no-js .your-slider \u003e div { float: none; }\n```\n\n## Browser Support\n**Desktop:**\nFirefox 8+ ✓\nChrome 15+ ✓  (Should works on _Chrome 4-14_ as well, but I couldn't test it.)\nSafari 4+ ✓\nOpera 12.1+ ✓\nIE 8+ ✓\n\n**Mobile:**\nAndroid Browser 4.2+ ✓\nChrome Mobile 63+ ✓\nFirefox Mobile 28+ ✓\nMaxthon 4+ ✓\n\n## Support\n\u003ca href=\"https://www.browserstack.com/\" target=\"_blank\"\u003e\u003cimg src=\"logos/browserstack.svg\" alt=\"Browser Stack\" width=\"170\"\u003e\u003c/a\u003e\u003cbr\u003eLive tests and Automated Tests \u003cbr\u003e\n\u003cbr\u003e\n\u003ca href=\"https://crossbrowsertesting.com/\" target=\"_blank\"\u003e\u003cimg src=\"logos/cbt.svg\" width=\"230\" alt=\"Cross Browser Testing\"\u003e\u003c/a\u003e\u003cbr\u003eLive tests, Screenshots and Automated Tests \u003cbr\u003e\n\u003cbr\u003e\n[Cdnjs](https://cdnjs.com/)\n\u003cbr\u003e\nImages on demo page are from https://unsplash.com/.\n\n## License\nThis project is available under the [MIT](https://opensource.org/licenses/mit-license.php) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fganlanyuan%2Ftiny-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fganlanyuan%2Ftiny-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fganlanyuan%2Ftiny-slider/lists"}