{"id":15673672,"url":"https://github.com/jaydenseric/skid","last_synced_at":"2025-05-07T20:07:28.286Z","repository":{"id":51373502,"uuid":"42398948","full_name":"jaydenseric/Skid","owner":"jaydenseric","description":"An ultra-lightweight slider utilizing Hurdler for URL hash based control.","archived":false,"fork":false,"pushed_at":"2021-05-13T00:15:20.000Z","size":29,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T20:07:19.425Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaydenseric.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-13T14:31:28.000Z","updated_at":"2025-01-07T00:18:27.000Z","dependencies_parsed_at":"2022-09-07T17:11:34.230Z","dependency_job_id":null,"html_url":"https://github.com/jaydenseric/Skid","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2FSkid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2FSkid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2FSkid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2FSkid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaydenseric","download_url":"https://codeload.github.com/jaydenseric/Skid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252949272,"owners_count":21830151,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-10-03T15:41:43.443Z","updated_at":"2025-05-07T20:07:28.258Z","avatar_url":"https://github.com/jaydenseric.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![Skid](https://cdn.rawgit.com/jaydenseric/Skid/v4.0.0/skid-logo.svg)\n\n![NPM version](https://img.shields.io/npm/v/skid-slider.svg?style=flat-square) ![Github issues](https://img.shields.io/github/issues/jaydenseric/Skid.svg?style=flat-square) ![Github stars](https://img.shields.io/github/stars/jaydenseric/Skid.svg?style=flat-square)\n\nAn ultra-lightweight slider that supports touch.\n\n- ~2 KB compressed.\n- Browser support: [\u003e 2%](http://browserl.ist/?q=%3E+2%25).\n- [MIT license](https://en.wikipedia.org/wiki/MIT_License).\n\n## Setup\n\n### HTML\n\nSkid expects the following HTML structure:\n\n```html\n\u003csection class=\"skid drag\"\u003e\n  \u003col class=\"slides\"\u003e\n    \u003cli class=\"active\" id=\"first\"\u003e\n      \u003c!-- Content --\u003e\n    \u003c/li\u003e\u003cli id=\"second\"\u003e\n      \u003c!-- Content --\u003e\n    \u003c/li\u003e\u003cli id=\"third\"\u003e\n      \u003c!-- Content --\u003e\n    \u003c/li\u003e\n  \u003c/ol\u003e\n  \u003cnav\u003e\n    \u003ca href=\"#/third\" class=\"prior\"\u003ePrior\u003c/a\u003e\n    \u003col\u003e\n      \u003cli\u003e\u003ca href=\"#/first\" class=\"active\"\u003e1\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#/second\"\u003e2\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#/third\"\u003e3\u003c/a\u003e\u003c/li\u003e\n    \u003c/ol\u003e\n    \u003ca href=\"#/second\" class=\"next\"\u003eNext\u003c/a\u003e\n  \u003c/nav\u003e\n\u003c/section\u003e\n```\n\nMake sure there are no spaces or line breaks between slide elements to avoid whitespace issues.\n\n### CSS\n\nAdd and customize the source styles from [`src/index.css`](src/index.css), or use the compiled styles in `node_modules/dist/skid.css`.\n\n### JS\n\nSkid requires a Hurdler instance – see the [Hurdler project](https://github.com/jaydenseric/Hurdler) for setup instructions.\n\nBe sure to use the [DOM4 polyfill](https://github.com/WebReflection/dom4) or manually handle:\n\n- [`query`](http://stackoverflow.com/a/38245620)\n- [`classList`](http://caniuse.com/#feat=classlist)\n- [`CustomEvent`](http://caniuse.com/#feat=customevent)\n- [`requestAnimationFrame` \u0026 `cancelAnimationFrame`](http://caniuse.com/#feat=requestanimationframe)\n\nInstall Skid in your project as an NPM dependency:\n\n```sh\nnpm install skid-slider --save\n```\n\nImport it:\n\n```javascript\nimport Skid from 'skid-slider'\n```\n\nInitialize it after DOM ready:\n\n```javascript\nconst skid = new Skid.Slider({\n  element: document.querySelector('.skid'),\n  hurdler\n})\n```\n\n## Events\n\nEvents can be listed for using `addEventListener`.\n\nElement | Event       | Description\n:------ | :---------- | :----------------------------------------\nSlider  | `activated` | A slide in the slider has been activated.\nSlide   | `active`    | The slide is now active.\n\n## API\n\n### Skid\n\nA slider utilizing Hurdler for URL hash based control.\n\n#### Slider\n\nConstructs a new Skid slider instance.\n\n**Parameters**\n\n- `options` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Initialization options.\n\n  - `options.element` **[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)** Container.\n  - `options.slides` **[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)?** Slides container.\n  - `options.priorLink` **([HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) | [boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean))?** Prior slide link, or false.\n  - `options.nextLink` **([HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) | [boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean))?** Next slide link, or false.\n  - `options.tabs` **([HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) | [boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean))?** Tab links container, or false.\n  - `options.dragClass` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** Container class name to enable drag and flick. (optional, default `'drag'`)\n  - `options.draggingClass` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** Container class name for dragging state. (optional, default `'dragging'`)\n\n- `hurdler` **Hurdler** Hurdler instance.\n\n##### getSlideBefore\n\nGets the slide before a slide.\n\n**Parameters**\n\n- `slide` **[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)** Slide after the desired slide.\n\nReturns **[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)** The slide before the input slide.\n\n##### getSlideAfter\n\nGets the slide after a slide.\n\n**Parameters**\n\n- `slide` **[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)** Slide before the desired slide.\n\nReturns **[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)** The slide after the input slide.\n\n##### activateSlide\n\nActivates a slide and pans the slider to it.\n\n**Parameters**\n\n- `slide` **([HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) | [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String))** Element or ID of the slide to activate.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fskid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaydenseric%2Fskid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fskid/lists"}