# A11Y Slider Library for simple and accessible sliders. [Demo and examples](https://a11yslider.js.org/#examples) ## Install Using npm: ```bash npm install a11y-slider ``` Using browser: ```html ``` ## Usage A11YSlider 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. ```html

``` `A11YSlider(element, options)` The `element` is the targeted slider element. The `options` is an optional parameter. See [options](#options) for more info. **Note:** A11YSlider only runs if needed! If A11YSlider detects that all slides are already visible in the container then it will not run. ## Options | Option | Type | Description | | ------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | container | Boolean | Default: `true`
Adds a container element around the slider | | arrows | Boolean | Default: `true`
Enables prev/next button | | prevArrow | Node \| NodeList | Default: `'; } }); ``` Will output to: ```html ``` ## Methods ```js // Example use of the 'scrollToSlide' method. // Scrolls to the 3rd slide (0-based index) slider.scrollToSlide(2); ``` | Method | Arguments | Description | | ------------- | ----------------------------------- | --------------------------------------------------------- | | scrollToSlide | Number \| Element | Scrolls slider to specified slide index (0-based) or slide element | | updateOptions | Object | Enter new set of options (reloads slider) | | refreshHeight | | Sets height of slider to height of the current active slide | | destroy | | Removes everything that the A11YSlider created in the DOM | ## Events ```js // Example use of the 'afterChange' event const sliderEl = document.querySelector('.slider'); sliderEl.addEventListener('afterChange', function(e) { console.log(e.detail.currentSlide); }); const slider = new A11YSlider(sliderEl, { infinite: true }); ``` | Event | Detail | Description | | ------------- | ----------------------------------- | ----------------------------------- | | init | a11yslider | Fires after slider initialization | | beforeChange | currentSlide, nextSlide, a11yslider | Fires before slide change | | afterChange | currentSlide, a11yslider | Fires after slide change | | autoplayStart | currentSlide, a11yslider | Fires when autoplay starts | | autoplayStop | currentSlide, a11yslider | Fires when autoplay stops | | destroy | a11yslider | Fires after the slider is destroyed | Events listeners should be added before initializing the slider if possible. For example `init` will require it. ## Browser support A11YSlider works on all modern browsers including IE11. See notes for some caveats. ## Notes - 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. #### Todo - Examples - Look into not removing width style from slides - Make autoprefix run automatically - Better resize throttling - Look into enabling useCapture for scroll events to prevent window events