{"_id":"@bentoboxes/tiny-slider","_rev":"6-d525acc3f897599cb641d53ef761c467","name":"@bentoboxes/tiny-slider","dist-tags":{"latest":"2.9.4"},"versions":{"2.9.3":{"name":"@bentoboxes/tiny-slider","version":"2.9.3","description":"Vanilla javascript slider for all purposes, inspired by Owl Carousel.","main":"src/tiny-slider.js","types":"src/tiny-slider.d.ts","directories":{"test":"test"},"scripts":{"ngrok":"~/ngrok http 3000","start":"nodemon --watch test/js/tests-async.js --exec npm run compile","compile":"npx babel test/js/tests-async.js -o test/js/tests-async-es5.js","test":"nightwatch -c browserstack.conf.js -e chrome,firefox,ie,edge,safari,opera","chrome":"nightwatch -c browserstack.conf.js -e chrome","firefox":"nightwatch -c browserstack.conf.js -e firefox","ie":"nightwatch -c browserstack.conf.js -e ie","edge":"nightwatch -c browserstack.conf.js -e edge","safari":"nightwatch -c browserstack.conf.js -e safari","opera":"nightwatch -c browserstack.conf.js -e opera"},"repository":{"type":"git","url":"git+https://github.com/ganlanyuan/tiny-slider.git"},"keywords":[],"author":{"name":"ganlanyuan","email":"ganlanyuan@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/ganlanyuan/tiny-slider/issues"},"homepage":"https://github.com/ganlanyuan/tiny-slider#readme","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","nightwatch":"^0.9.21","nodemon":"^1.17.5"},"browserify":{"transform":[["babelify",{"presets":["@babel/preset-env"]}]]},"gitHead":"a2248b65ddf302f12fb7346d45db2d6349794475","_id":"@bentoboxes/tiny-slider@2.9.3","_nodeVersion":"10.15.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-xgkvYX/Qguu8mcx0nxOfac8vYqPdGllg1kCzt7jjDRJVUAUx1cOCVNQRWs5D0RwzgwfjOm5y0t9xnxDdb2yVjA==","shasum":"ec603b9cd887bd2c00d7706e257a95168fea87bc","tarball":"https://registry.npmjs.org/@bentoboxes/tiny-slider/-/tiny-slider-2.9.3.tgz","fileCount":63,"unpackedSize":235491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3ECXCRA9TVsSAnZWagAA9PcQAI+QIWOSNczRdAAYcYn7\nr9mTwwe8oz6YrquckIZDqsI00u+NrJE1Eozd5EZfQLA3/DT1pCjY2Tcfw7M2\n8vSOnvzfUHeMS3L6N8QT8ZT6CzTieq2XJ/hS0Bmx4YtrsjiB1S8DWlmy0uGM\n/VKCVO9L13PePOQ0C8DPH5TTrdSZ1j9mkZJu6FFlrnmVLBPq/BSdQPbys7MB\nhQwRLZREs0nKXQU14NPHvlKXzyJ+ReejZwGHiA8RDGDBCBXM1N66ifnQn5CY\nRf2az6+8+uNCygGyeqvk+jXGZg/2Xuvc/OrY7m6XcvDoAMXDov+mcq8fCp3X\nX/8fRUDHK3Cwy/9ycqzsdRPrd5PJYLksR13aD2uURTMis+egoJahMM0k3QtB\ngIKc1dFaTAEonY9e8mVavRJPMTfTxmGLCX38U4p4zF+5JsValn1BEaHJNyQk\nSMrUW8bYJ+hWbW3lumzKbTNJV2t+j3lXau2r8pn2CB12jRngHQ6ne99go8Tx\nuthxJJskzR/le4UCROmM57tPHMXKAFHODOhDqXf3mf3qQL960oQkFy6cySGJ\nmZoJzX6e+kJMTNjtM5bSDWnb5dMxwh0ZGV6F7DObbLRXHMiCuyGKmk+kN7nw\nXrz3z19c495PTTuBmhACrTbway+4jO6uNd4oB5T7jWXFCjDY5Iv11QFyay9M\nR3h4\r\n=s23w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkgEqwaNiZEsvWXfM2WOMntyMNUZbXq3eDdmn3/W/o7gIhAIUS0VP0F6SIHKp4idS9c4QH+mxDLkypNwy25fd16Ipx"}]},"maintainers":[{"name":"eduardojh_007","email":"eduardo.juarez.h07@gmail.com"},{"name":"miglez90","email":"miglez90290995@gmail.com"},{"name":"alexserrano22","email":"alexserrano63@gmail.com"},{"name":"webtraining","email":"alex.arriaga.m@gmail.com"}],"_npmUser":{"name":"miglez90","email":"miglez90290995@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tiny-slider_2.9.3_1557938326470_0.7308887038534375"},"_hasShrinkwrap":false},"2.9.4":{"name":"@bentoboxes/tiny-slider","version":"2.9.4","description":"Vanilla javascript slider for all purposes, inspired by Owl Carousel.","main":"src/tiny-slider.js","types":"src/tiny-slider.d.ts","directories":{"test":"test"},"scripts":{"ngrok":"~/ngrok http 3000","start":"nodemon --watch test/js/tests-async.js --exec npm run compile","compile":"npx babel test/js/tests-async.js -o test/js/tests-async-es5.js","test":"nightwatch -c browserstack.conf.js -e chrome,firefox,ie,edge,safari,opera","chrome":"nightwatch -c browserstack.conf.js -e chrome","firefox":"nightwatch -c browserstack.conf.js -e firefox","ie":"nightwatch -c browserstack.conf.js -e ie","edge":"nightwatch -c browserstack.conf.js -e edge","safari":"nightwatch -c browserstack.conf.js -e safari","opera":"nightwatch -c browserstack.conf.js -e opera"},"repository":{"type":"git","url":"git+https://github.com/ganlanyuan/tiny-slider.git"},"keywords":[],"author":{"name":"ganlanyuan","email":"ganlanyuan@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/ganlanyuan/tiny-slider/issues"},"homepage":"https://github.com/ganlanyuan/tiny-slider#readme","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","nightwatch":"^0.9.21","nodemon":"^1.17.5"},"browserify":{"transform":[["babelify",{"presets":["@babel/preset-env"]}]]},"gitHead":"3ec809b95ecb0f303d4557bf51ba8da17e910733","_id":"@bentoboxes/tiny-slider@2.9.4","_nodeVersion":"10.15.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-cdapE7UAEuwKqzIEaJLRmaPJsYdzdEEguda3TGse45UtHltSwR9facAi9JojDKxzqei8myUHflLZJxDnjhsVYw==","shasum":"46a52daf6a5fbebbca9c3a02e31b304e8a54c683","tarball":"https://registry.npmjs.org/@bentoboxes/tiny-slider/-/tiny-slider-2.9.4.tgz","fileCount":63,"unpackedSize":235532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9nSnCRA9TVsSAnZWagAANxAQAIB3jhmDYN29c2pliTnM\n7HCkKETSMqtcU/S5fLlQExETCegpk9oJbq7nKJLahfppiEZDhXfebV/Rc8lP\nFsP+T7Ad7f6mfiBXO2JF1YzxfYjWo1b7h7QMWUy7hmaU0Ze4BSHWrDzirns/\nvagaFuesTtTCg6O4mAY4+SOKpkwu5hJPUI1scF6wTN0oFxOQEj6CaoJzX3N2\nQ+a+aqWtntkptwZVce6xtf5ClkKS9fzYnw55r93MvV+QFtO9+RciL4BAXLoT\nrzBvDG1xsSgob28905I/rVFERKky2bPtxOqWd+cKjW1VGoz0oMtRrX7erzGf\njEpRdEPq1la4Bm8Ezn5hw4ETCzbeJAQBCkKrL8XhwvuIghGGbTfNdZI6NzF0\n4IaJhV4hmUntznrxcEV/YHixdHEvSMCVLwLFOoyx98kezIJtytGPxUn5DGZg\nf88XbjGplz7MzSS6/OOHBIiPtC7mNEKtt3DiepTW5yxvb//qQ/ZlWpcoGTLs\nGR0Z+JJ8kh/rUMSAhQOEdfAAKfBp4QHLMb7yX0m4zKpiHVMklHT5AYjP6VSf\n5aqNN7eRJ69LDO0YXvmaHiJS885X1RAJs21IzbojuR64Av+YdiFFG738blb1\nNQCoPBJe7f8t6VVaDtM2x3kl9zueigCMGbowKqp7CB6vt4cdykGiO2hnlAGx\n2ovM\r\n=Qv6U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnJP70H7pzgM7a/Wa38rfk7V19MMfHJjJUSiMcazntuAiALPV4CyAd58eP13fU96J5KxbDJUnB9q0836mNsrYyooA=="}]},"maintainers":[{"name":"alexserrano22","email":"alexserrano63@gmail.com"},{"name":"eduardojh_007","email":"eduardo.juarez.h07@gmail.com"},{"name":"miglez90","email":"miglez90290995@gmail.com"},{"name":"webtraining","email":"alex.arriaga.m@gmail.com"}],"_npmUser":{"name":"miglez90","email":"miglez90290995@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tiny-slider_2.9.4_1559655590073_0.16893126356783172"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-15T16:38:46.279Z","2.9.3":"2019-05-15T16:38:46.621Z","modified":"2022-11-26T00:06:17.008Z","2.9.4":"2019-06-04T13:39:50.232Z"},"maintainers":[{"email":"arturomaximuslewis@gmail.com","name":"arthur_espinoza"},{"email":"alex.arriaga.m@gmail.com","name":"webtraining"},{"email":"alexserrano63@gmail.com","name":"alexserrano22"},{"email":"miglez90290995@gmail.com","name":"miglez90"},{"email":"eduardo.juarez.h07@gmail.com","name":"eduardojh_007"},{"email":"Edy.cisneros1893@gmail.com","name":"eddycisneros"}],"description":"Vanilla javascript slider for all purposes, inspired by Owl Carousel.","homepage":"https://github.com/ganlanyuan/tiny-slider#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/ganlanyuan/tiny-slider.git"},"author":{"name":"ganlanyuan","email":"ganlanyuan@gmail.com"},"bugs":{"url":"https://github.com/ganlanyuan/tiny-slider/issues"},"license":"MIT","readme":"# tiny-slider 2.0\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.1-green.svg) \nTiny slider for all purposes, inspired by [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/). \n[Demos](http://ganlanyuan.github.io/tiny-slider/demo) \n[Test results](http://ganlanyuan.github.io/tiny-slider/test)\n\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 capbility 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-20)* \n\n## Features\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
 Carousel *Gallery
Horizontal *Vertical
Percentage Width *Fixed WidthAuto Width
Loop✓✓✓✓✓
Rewind✓✓✓✓ 
Slide by✓✓✓✓ 
Gutter✓✓✓✓✓
Edge padding✓✓✓✓ 
Center (v2.9.1+)✓✓✓  
Responsive✓✓✓✓✓
Lazyload✓✓✓✓✓
Autoplay✓✓✓✓✓
Auto height✓✓✓✓✓
Touch/drag✓✓✓✓✓
Arrow keys✓✓✓✓✓
Customize controls/nav✓✓✓✓✓
Accessibility✓✓✓✓✓
Respond to DOM visibility changes✓✓✓✓✓
Custom events✓✓✓✓✓
Nested✓✓✓✓✓
\n* Default\n\n*[top↑](#tiny-slider-20)* \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\n\n```\n\n#### 2. Add markup\n```html\n
\n
\n
\n
\n
\n\n```\n\n#### 3. Call tns()\nAdd tiny-slider.js to your page: \n```html\n\n\n```\n\nOr import `tns` via `webpack` or `rollup`:\n```javascript\n// yourScript.js\nimport { tns } from \"./node_modules/tiny-slider/src/tiny-slider\"\n```\n\nOr import `tns` directly start from v2.9.1 \n```html\n\n```\n*[top↑](#tiny-slider-20)* \n\n## Options\n\n| Option | Type | Description |\n| --- | --- | --- |\n| `container` | Node \\| String | Default: `'.slider'`.
The slider container element or selector. |\n| `mode` | \"carousel\" \\| \"gallery\" | Default: \"carousel\".
Controls animation behaviour.
With `carousel` everything slides to the side, while `gallery` uses fade animations and changes all slides at once. |\n| `axis` | \"horizontal\" \\| \"vertical\" | Default: \"horizontal\".
The axis of the slider. |\n| `items` | positive number | Default: 1.
Number of slides being displayed in the viewport.
If slides less than `items`, the slider won't be initialized. |\n| `gutter` | positive integer | Default: 0.
Space between slides (in \"px\"). |\n| `edgePadding` | positive integer | Default: 0.
Space on the outside (in \"px\"). |\n| `fixedWidth` | positive integer \\| false | Default: false.
Controls `width` attribute of the slides. |\n| `autoWidth` | Boolean | Default: false.
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.
Maximum viewport width for `fixedWidth`/`autoWidth`. |\n| `slideBy` | positive number \\| \"page\" | Default: 1.
Number of slides going on one \"click\". |\n| `center` (v2.9.1+) | Boolean | Default: false.
Center the active slide in the viewport. |\n| `controls` | Boolean | Default: true.
Controls the display and functionalities of `controls` components (prev/next buttons). If `true`, display the `controls` 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.|\n| `controlsPosition` | \"top\" \\| \"bottom\" | Default: \"top\".
Controls `controls` position. |\n| `controlsText` | (Text \\| Markup) Array | Default: [\"prev\", \"next\"].
Text or markup in the prev/next buttons. |\n| `controlsContainer` | Node \\| String \\| false | Default: false.
The container element/selector around the prev/next buttons.
`controlsContainer` must have at least 2 child elements. |\n| `prevButton` | Node \\| String \\| false | Default: false.
Customized previous buttons.
This option will be ignored if `controlsContainer` is a Node element or a CSS selector. |\n| `nextButton` | Node \\| String \\| false | Default: false.
Customized next buttons.
This option will be ignored if `controlsContainer` is a Node element or a CSS selector. |\n| `nav` | Boolean | Default: true.
Controls the display and functionalities of `nav` components (dots). If `true`, display the `nav` and add all functionalities. |\n| `navPosition` | \"top\" \\| \"bottom\" | Default: \"top\".
Controls `nav` position. |\n| `navContainer` | Node \\| String \\| false | Default: false.
The container element/selector around the dots.
`navContainer` must have at least same number of children as the slides. |\n| `navAsThumbnails` | Boolean | Default: false.
Indecate if the dots are thurbnails. If `true`, they will always be visible even when more than 1 slides displayed in the viewport. |\n| `arrowKeys` | Boolean | Default: false.
Allows using arrow keys to switch slides. |\n| `speed` | positive integer | Default: 300.
Speed of the slide animation (in \"ms\"). |\n| `autoplay` | Boolean | Default: false.
Toggles the automatic change of slides. |\n| `autoplayPosition` | \"top\" \\| \"bottom\" | Default: \"top\".
Controls `autoplay` position. |\n| `autoplayTimeout` | positive integer | Default: 5000.
Time between 2 `autoplay` slides change (in \"ms\"). |\n| `autoplayDirection` | \"forward\" \\| \"backward\" | Default: \"forward\".
Direction of slide movement (ascending/descending the slide index). |\n| `autoplayText` | Array (Text \\| Markup) | Default: [\"start\", \"stop\"].
Text or markup in the autoplay start/stop button. |\n| `autoplayHoverPause` | Boolean | Default: false.
Stops sliding on mouseover. |\n| `autoplayButton` | Node \\| String \\| false | Default: false.
The customized autoplay start/stop button or selector. |\n| `autoplayButtonOutput` | Boolean | Default: true.
Output `autoplayButton` markup when `autoplay` is true but a customized `autoplayButton` is not provided. |\n| `autoplayResetOnVisibility` | Boolean | Default: true.
Pauses the sliding when the page is invisiable 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\".
Name of intro animation `class`. |\n| `animateOut` | String | Default: \"tns-fadeOut\".
Name of outro animation `class`. |\n| `animateNormal` | String | Default: \"tns-normal\".
Name of default animation `class`. |\n| `animateDelay` | positive integer \\| false | Default: false.
Time between each `gallery` animation (in \"ms\"). |\n| `loop` | Boolean | Default: true.
Moves throughout all the slides seamlessly. |\n| `rewind` | Boolean | Default: false.
Moves to the opposite edge when reaching the first or last slide. |\n| `autoHeight` | Boolean | Default: false.
Height of slider container changes according to each slide's height. |\n| `responsive` | Object: {
 breakpoint: {
  key: value
 }
} \\| false | Default: false.
Breakpoint: Integer.
Defines options for different viewport widths (see [Responsive Options](#responsive-options)).
|\n| `lazyload` | Boolean | Default: false.
Enables lazyloading images that are currently not viewed, thus saving bandwidth (see [demo](http://ganlanyuan.github.io/tiny-slider/tests/#lazyload_wrapper)).
NOTE:
+ Class `.tns-lazy-img` need to be set on every image you want to lazyload if option `lazyloadSelector` is not specified;
+ `data-src` attribute with its value of the real image `src` is requierd;
+ `width` attribute for every image is required for `autoWidth` slider. |\n| `lazyloadSelector` (v2.9.1+) | String | Default: `'.tns-lazy-img'`.
The CSS selector for lazyload images. |\n| `touch` | Boolean | Default: true.
Activates input detection for touch devices. |\n| `mouseDrag` | Boolean | Default: false.
Changing slides by dragging them. |\n| `swipeAngle` | positive integer \\| Boolean | Default: 15.
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.
Prevent next transition while slider is transforming. |\n| `preventScrollOnTouch` (v2.9.1+) | \"auto\" \\| \"force\" \\| false | Default: false.
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.
Difine the relationship between nested sliders. (see [demo](http://ganlanyuan.github.io/tiny-slider/demo/#nested_wrapper))
Make sure you run the inner slider first, otherwise the height of the inner slider container will be wrong. |\n| `freezable` | Boolean | Default: true.
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.
Disable slider. |\n| `startIndex` | positive integer | Default: 0.
The initial `index` of the slider. |\n| `onInit` | Function \\| false | Default: false.
Callback to be run on initialization. |\n| `useLocalStorage` | Boolean | Default: true.
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\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-20)* \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\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-20)* \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-20)* \n\n#### Fallback\n```css\n.no-js .your-slider { overflow-x: auto; }\n.no-js .your-slider > 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\"Browser
Live tests and Automated Tests
\n
\n\"Cross
Live tests, Screenshots and Automated Tests
\n
\n[Cdnjs](https://cdnjs.com/) \n
\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","readmeFilename":"README.md"}