{"id":32117338,"url":"https://github.com/mmdevcodes/a11y-slider","last_synced_at":"2026-02-21T19:34:07.310Z","repository":{"id":37821208,"uuid":"214935980","full_name":"mmdevcodes/a11y-slider","owner":"mmdevcodes","description":"Library for simple and accessible sliders","archived":false,"fork":false,"pushed_at":"2023-09-27T09:32:45.000Z","size":19961,"stargazers_count":55,"open_issues_count":35,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-12-12T22:56:23.339Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://a11yslider.js.org/","language":"SCSS","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/mmdevcodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2019-10-14T03:02:35.000Z","updated_at":"2025-09-12T10:57:08.000Z","dependencies_parsed_at":"2024-05-20T00:46:42.092Z","dependency_job_id":null,"html_url":"https://github.com/mmdevcodes/a11y-slider","commit_stats":null,"previous_names":["mmdevcodes/a11y-slider","mmahandev/a11y-slider"],"tags_count":48,"template":false,"template_full_name":null,"purl":"pkg:github/mmdevcodes/a11y-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmdevcodes%2Fa11y-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmdevcodes%2Fa11y-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmdevcodes%2Fa11y-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmdevcodes%2Fa11y-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmdevcodes","download_url":"https://codeload.github.com/mmdevcodes/a11y-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmdevcodes%2Fa11y-slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29691045,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T18:18:25.093Z","status":"ssl_error","status_checked_at":"2026-02-21T18:18:22.435Z","response_time":107,"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":[],"created_at":"2025-10-20T16:37:39.568Z","updated_at":"2026-02-21T19:34:07.304Z","avatar_url":"https://github.com/mmdevcodes.png","language":"SCSS","readme":"# A11Y Slider\n\nLibrary for simple and accessible sliders. [Demo and examples](https://a11yslider.js.org/#examples)\n\n## Install\n\nUsing npm:\n\n```bash\nnpm install a11y-slider\n```\n\nUsing browser:\n\n```html\n\u003c!-- In the \u003chead\u003e --\u003e\n\u003clink rel=\"stylesheet\" href=\"//unpkg.com/a11y-slider@latest/dist/a11y-slider.css\" /\u003e\n\n\u003c!-- End of \u003cbody\u003e --\u003e\n\u003cscript src=\"//unpkg.com/a11y-slider@latest/dist/a11y-slider.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nA11YSlider works by using [CSS scroll snapping](https://css-tricks.com/practical-css-scroll-snapping/). You can generate a slider by creating an overflowed container and then setting widths all via CSS. Media queries in your CSS will also update the slider.\n\n```html\n\u003cstyle\u003e\n .slider {\n display: flex;\n }\n\n .slider \u003e * {\n width: 100%;\n flex: 0 0 auto;\n }\n\u003c/style\u003e\n\n\u003cul class=\"slider\"\u003e\n \u003cli\u003e1\u003c/li\u003e\n \u003cli\u003e2\u003c/li\u003e\n \u003cli\u003e3\u003c/li\u003e\n \u003cli\u003e4\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cscript\u003e\n const slider = new A11YSlider(document.querySelector('.slider'), {\n adaptiveHeight: true,\n dots: false\n });\n\u003c/script\u003e\n```\n`A11YSlider(element, options)`\n\nThe `element` is the targeted slider element. The `options` is an optional parameter. See [options](#options) for more info.\n\n**Note:** A11YSlider only runs if needed! If A11YSlider detects that all slides are already visible in the container then it will not run.\n\n## Options\n\n| Option | Type | Description |\n| ------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| container | Boolean | Default: `true` \u003cbr\u003eAdds a container element around the slider |\n| arrows | Boolean | Default: `true` \u003cbr\u003eEnables prev/next button |\n| prevArrow | Node \\| NodeList | Default: `\u003cbutton\u003e` \u003cbr\u003eButton to trigger previous slide. A11YSlider will generate one by default. Can be one or multiple HTML elements. |\n| nextArrow | Node \\| NodeList | Default: `\u003cbutton\u003e` \u003cbr\u003eButton to trigger next slide. A11YSlider will generate one by default. Can be one or multiple HTML elements. |\n| dots | Boolean | Default: `true` \u003cbr\u003eGenerate navigation dots |\n| adaptiveHeight | Boolean | Default: `false` \u003cbr\u003eHeight of slider container changes according to each slide's height |\n| skipBtn | Boolean | Default: `true` \u003cbr\u003eAdds a skip button before the slider for a11y devices (Can be seen by tabbing) |\n| slidesToShow | Number \\| Null | Default: `null` \u003cbr\u003eThe total number of items to be shown. By default A11YSlider will work by default based off your CSS styling. This option hardcodes the width into the HTML for you. |\n| autoplay | Boolean | Default: `false` \u003cbr\u003eEnables the automatic change of slides |\n| autoplaySpeed | Number | Default: `4000` \u003cbr\u003eTime between slide changes when autoplay is enabled (milliseconds) |\n| autoplayHoverPause | Boolean | Default: `true` \u003cbr\u003eIf autoplay is enabled then pause when the slider is hovered |\n| centerMode | Boolean | Default: `false` \u003cbr\u003e**(EXPERIMENTAL)** Makes the center slide active |\n| infinite | Boolean | Default: `true` \u003cbr\u003eMakes the slider infinitely loop |\n| disable | Boolean | Default: `false` \u003cbr\u003eDisables the slider |\n| responsive | Object \\| Null | Default: `null` \u003cbr\u003eDefine options for different viewport widths. See [responsive example](#responsive-option-example) |\n| customPaging | Function \\| Null | Default: `null` \u003cbr\u003eDefine your own custom dots template |\n| swipe | Boolean | Default: `true` \u003cbr\u003eEnable swiping |\n\n### Responsive Option Example\n\nYou can have different options per specified viewport width. This behaves like CSS min-width media queries. Your initial options outside of the `responsive` object will work from your lowest specified viewport and down.\n\n```js\nconst slider = new A11YSlider(document.querySelector('.slider'), {\n slidesToShow: 1,\n arrows: true, // arrows enabled 767px and down\n dots: false,\n responsive: {\n 768: {\n slidesToShow: 2,\n arrows: false\n },\n 960: {\n disable: true // slider disabled 960px to 1279px\n },\n 1280: {\n disable: false,\n slidesToShow: 4,\n dots: true // dots enabled 1280px and up\n }\n }\n});\n```\n\n### Custom Paging Example\n\nIf you would like your own custom HTML for each dot you can pass in your own function. It must return a string and then this function will be called to create HTML for each individual dot. Note that dots will still be wrapped in a `\u003cul\u003e`.\n\n```js\nconst slider = new A11YSlider(document.querySelector('.slider'), {\n dots: true,\n customPaging: function(index, a11ySlider) {\n return '\u003cbutton class=\"mycustombtn\"\u003e' + index + '\u003c/button\u003e';\n }\n});\n```\n\nWill output to:\n\n```html\n\u003cul class=\"a11y-slider-dots\"\u003e\n \u003cli\u003e\u003cbutton class=\"mycustombtn\"\u003e0\u003c/button\u003e\u003c/li\u003e\n \u003cli\u003e\u003cbutton class=\"mycustombtn\"\u003e1\u003c/button\u003e\u003c/li\u003e\n \u003cli\u003e\u003cbutton class=\"mycustombtn\"\u003e2\u003c/button\u003e\u003c/li\u003e\n \u003cli\u003e\u003cbutton class=\"mycustombtn\"\u003e3\u003c/button\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## Methods\n\n```js\n// Example use of the 'scrollToSlide' method.\n// Scrolls to the 3rd slide (0-based index)\nslider.scrollToSlide(2);\n```\n\n| Method | Arguments | Description |\n| ------------- | ----------------------------------- | --------------------------------------------------------- |\n| scrollToSlide | Number \\| Element | Scrolls slider to specified slide index (0-based) or slide element |\n| updateOptions | Object | Enter new set of options (reloads slider) |\n| refreshHeight | | Sets height of slider to height of the current active slide |\n| destroy | | Removes everything that the A11YSlider created in the DOM |\n\n## Events\n\n```js\n// Example use of the 'afterChange' event\nconst sliderEl = document.querySelector('.slider');\n\nsliderEl.addEventListener('afterChange', function(e) {\n console.log(e.detail.currentSlide);\n});\n\nconst slider = new A11YSlider(sliderEl, {\n infinite: true\n});\n```\n\n| Event | Detail | Description |\n| ------------- | ----------------------------------- | ----------------------------------- |\n| init | a11yslider | Fires after slider initialization |\n| beforeChange | currentSlide, nextSlide, a11yslider | Fires before slide change |\n| afterChange | currentSlide, a11yslider | Fires after slide change |\n| autoplayStart | currentSlide, a11yslider | Fires when autoplay starts |\n| autoplayStop | currentSlide, a11yslider | Fires when autoplay stops |\n| destroy | a11yslider | Fires after the slider is destroyed |\n\nEvents listeners should be added before initializing the slider if possible. For example `init` will require it.\n\n## Browser support\n\nA11YSlider works on all modern browsers including IE11. See notes for some caveats.\n\n## Notes\n\n- Non-modern browsers that doesn't support [ScrollToOptions](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) will not have smooth scrolling when switching slides. A polyfill like [smoothscroll](https://github.com/iamdustan/smoothscroll) can be used to fix this.\n\n#### Todo\n\n- Examples\n- Look into not removing width style from slides\n- Make autoprefix run automatically\n- Better resize throttling\n- Look into enabling useCapture for scroll events to prevent window events","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmdevcodes%2Fa11y-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmdevcodes%2Fa11y-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmdevcodes%2Fa11y-slider/lists"}