Hi there, is this plugin end of life? A lot of issues and last commit over 6 months ago? It's really easy to use and wish it will continue.

End of life?

The `tns-slider` nav item's buttons are missing a `type="button"` attribute. This causes unintended behavior when the slider is placed inside a `<form>` element.  

Since buttons without a specified `type` default to `type="submit"`, clicking on the navigation buttons triggers the form submission, which is not the expected behavior.  

**Steps to Reproduce:**  
1. Add a `tns-slider` with navigation buttons inside a `<form>` element.  
2. Click on any navigation button.  
3. Observe that the form is submitted instead of just navigating through the slider.  

**Expected Behavior:**  
The navigation buttons should have a `type="button"` attribute to prevent them from defaulting to `type="submit"` and triggering form submission.  

**Suggested Fix:**  
- Update the `tns-slider` component to ensure that all navigation buttons include a `type="button"` attribute.  
- While the issue could be temporarily mitigated by using `evt.preventDefault()` on form submission, this is only a workaround and does not address the root cause. The issue should be properly resolved by fixing the button attributes.  


```html

// missing type="button" attribute
<div class="tns-nav" aria-label="Carousel Pagination">
    <button data-nav="0" aria-controls="tns1" style="" aria-label="Carousel Page 1" class="" tabindex="-1"></button>
    <button data-nav="1" aria-controls="tns1" style="" aria-label="Carousel Page 2 (Current Slide)" class="tns-nav-active"></button>
    <button data-nav="2" aria-controls="tns1" style="" aria-label="Carousel Page 3" class="" tabindex="-1"></button>
</div>


```

Nav Buttons Triggering Form Submission Due to Missing Typy Attribute

__Issue description__:  I have seen that it has been decided to put all control and navigation elements on top of the slider, due to accessibility (#4). This is totally fine, but in my case it is needed to have the navigation underneath. Since I could not find any option to place navigation controls at the bottom, I highly recommend to add an option for the position. This would make the slider more flexible without using the workaround with `navContainer` where one need to know how many elements are in the slider during markup generation. Also styling this additonal container causes more CSS code.

__Demo link/slider setting__:
```javascript
slider = tns({
	container: '.container-class',
	controls: false,
	items: 1,
	nav: true,
	navPos: 'bottom' // not supported yet
});
```

_Tiny-slider version_:   2.8.7

feature request

Place navigation controls at the bottom

Right now Im using the aria labels to style those but maybe adding a quick class like `slide-active` or similar might help (?)

enhancement

Feature request: Classes for current slide/dot

The `autoplay` option also controls the visibility of the start/stop button, changing `controls` to `false` does not hide that button.

CSS workaround:

```css
div[aria-label="Carousel Pagination"] button[data-action="stop"] {
  display: none;
}
``` 

Disabling controls does not hide the autoplay start/stop button

I'm using this slider in the vertical axis, and have had to do some hacky stuff. The requirements are that...

1) The vertical content area is scrollable via the mousewheel
2) Is a "carousel" and has pagedot controls
3) Jumps from slide to slide (continues scrolling if slide is bigger than the viewport)

Let me know if this is currently possible, or would be a feature in the future!

[Request] "Freescroll" on mouse scroll

Hi,

I'm trying to use this library along with Webpack. But when I import it like this:
```
import tinySlider from 'tiny-slider'
console.log(tinySlider)
```

It imports only one empty object ( => `{}`).
Am I doing anything wrong? Is it actually possible to use it this way?


Issues when importing via Webpack

Please check the page below:

https://www.w3.org/WAI/EO/Drafts/tutorials/sliders/


Implement acessibility features

__Issue description__:  
If loop is false, the previous button should be hidden initially, and the next should be hidden when you reach the end.

__Demo link/slider setting__:   

```
var sliderConfig = {
            container: '.js-slider',
            items: 2,
            responsive: {},
            slideBy: 'page', //or integer for number of slides
            autoplay: false,
            lazyload: true,
            nav: false,
            loop: false,
        }
```

_Tiny-slider version_:   2.3.7
_Browser name && version_: chrome  
_OS name && version_:   osx

should hide the "prev" and "next" at appropriate times when loop is false

Although I like your carousel a lot, there are two things I'm missing.

First, there is no option for localisation. I really like `aria-label`s on items making it usable for screen readers. But it would be even better, if there's an option for translating these labels into different language by making them slider option. I also missing numbers inside carousel pagination, which I believe might be useful (although it would be possible to use CSS to get them).

Second, I would make integration easier, if there's an option to specify custom classes on some elements, eg. for navigation buttons.

question

Adding language localisation options and custom classes

__Issue description__:  
Can't set navContainer - throws a `Cannot read property 'item' of undefined` error. It still adds the aria label tho.
__Demo__:  
https://jsfiddle.net/ahv0cn2p/1/

_Tiny-slider version_:   2.2.4
_Browser name && version_:  Chrome Version 61.0.3163.100 (Official Build) (64-bit)
_OS name && version_:   OSX El Capitan 10.11.6

setting navContainer throws an error

I'm using TinySlider to build a slowly fading background gallery, so `speed` is set to 3s and `autoplayTimeout` to 5s. I use a simple dot navigation, and since the next dot is highlighted upon animation end, it seems like the wrong dot is highlighted for the last two seconds of the animation.  
Therefore, I'd like to know whether it'd be possible to add a configuration option `navAnimation` for the slider navigation which has two possible values: `start` and `end` (default).  
On `start`, the nav would switch its selected element as soon as the slider starts showing the next slide, on `end` it would switch the selected element once the slide animation is finished (as it is now).  
I'm not completely satisfied with the option naming though, so maybe a native english speaker would be able to come up with a better one.  
Thank you! 😊 

Edit: You can find a demo [here](http://bnm.dev.boxhorn-edv.com/).
*(Just noticed I got the start/end descriptions the wrong way round, corrected)*

Feature request - Add option to control dot navigation behaviour

I noticed an issue with the nav buttons when using 7 elements within a 4 item slider.  When clicking on the second nav button, the wrong button gets the aria-selected="true" attribute.

Here is a codepen to see the issue: https://codepen.io/anon/pen/OgxxdJ

To reproduce the bug (using a viewport >1200px wide):

1. click on the second nav button
2. notice that the button _after_ gets the aria-selected="true" attribute

Note:  This issue only exists the first time navigating the slider.  Clicking on the second nav button and then the first, and then the second again seems to work just fine since the second button nicely gets the aria-selected="true" attribute.

If you would like me to submit a PR for this, please let me know and I'll do my best.

[data-tns-role=nav] buttons

__Issue description__:  
nav number changes while drag items, base on leftover item number.
expect behavior like: 
https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html
thanks!

__Demo link/slider setting__:   
https://codepen.io/squarer/pen/RYXZXZ?editors=1111

_Tiny-slider version_:   2.8.6
_Browser name && version_:  Chrome 69.0.3497
_OS name && version_:  macos high sierra 10.13.6

Keep nav dot number stay the same

__Issue description__:  When `arrowKeys` is enable, if we click on control buttons then press arrow keys, the slider skip an index, perhaps theres an issue with adding/removing event listeners

edit: Another problem found: When `arrowKeys` is disabled, if we click on control buttons once time we can navigate with arrow keys

_Tiny-slider version_:   2.8.7
_Browser name && version_:  Chrome  Version 68.0.3440.106 (Build officiel) (64 bits)
_OS name && version_:   Ubuntu 16.04 LTS

Encountered issue with events

Here are my codes:

For HTML code:

`
<div class="tiny-slider-wrapper">
	
	<div class="tiny-slider-customized-controls tiny-slider-inner">
	
		<div class="tiny-slider-item">
			<div class="bg-primary flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">01</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-danger flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">02</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-warning flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">03</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-success flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">04</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-info flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">05</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-primary flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">06</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-danger flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">07</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-warning flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">08</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-success flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">09</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-info flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">10</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-primary flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">11</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-danger flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">12</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-warning flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">13</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-success flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">14</div>
		</div>
		
		<div class="tiny-slider-item">
			<div class="bg-info flex-vertical-align" style="height: 150px; text-align: center; color: #FFF; font-size: 20px;">15</div>
		</div>
		
	</div>

	<ul class="controls customized-arrows">
		<li class="prev">
			<i class="fa fa-angle-left"></i>
		</li>
		<li class="next">
			<i class="fa fa-angle-right"></i>
		</li>
	</ul>

</div>
`
For the Js code:

```
var slider = tns({
	container: '.tiny-slider-customized-controls',
	items: 4,
	slideBy: 'page',
	autoplay: false,
	controlsContainer: ".customized-arrows",
	loop: false,
});
```

And for the css code: 

```
ul.controls.customized-arrows { background-color: #EEE; text-align: center; margin-top: 15px; }
ul.controls.customized-arrows li { display: inline-block; }
.controls.customized-arrows [aria-controls] { font-size: 30px; margin: 0 5px; line-height: 1; -moz-transition: color 0.3s ease-out; -webkit-transition: color 0.3s ease-out; transition: color 0.3s ease-out; }
.controls.customized-arrows [aria-controls]:hover { cursor: pointer; color: red; }
.controls.customized-arrows [disabled]{color: inherit; opacity: 0.4; cursor:not-allowed!important}
```


The [disabled] for customized controls (arrows) is not working. Please help.

Thanks in advance.

[disabled] for customized controls (arrows) is not working.

Hi, thanks for your great slider. I tried to initialize sliders on the first load of my page and there are sliders on different tab content. As I toggle other tabs and slide the slider on mobile view, it get stucked and my browser freezes. `autoplay` is `false`.

```
var sliderOptions = {
    container: '',
    items: 1,
    autoplay: false,
    nav: false,
    slideBy: 1,
    gutter: 10,
    edgePadding: 20,
    controls: false,
    animateIn: true,
    lazyload: true,
    mouseDrag: true,
    responsive: {
      760: {
        disable: true
      }
    }
  };
```

_Tiny-slider version_:   Latest
_Browser name && version_:   Chrome latest
_OS name && version_:   Yosemite

Sliders inside tab content where in aria-hidden is true is broken

First off like your slider a lot!

I do have one small issue with compliance you added though, according to the testing tool axe and W3C you are not allowed to put **aria-selected** on an element with type button.

If you use button you should use the label: **aria-pressed** instead.

Here is a link to the docs:

https://www.w3.org/TR/wai-aria-practices/examples/button/button.html

Compliance issue

__Issue description__:
I've noticed that tiny-slider rebuilds at each breakpoint listed in my `responsive` object. Assuming that this doesn't exist already, would it be possible to add a custom event to announce the beginning and end of rebuilds, e.g. `rebuildStart` and `rebuildFinish`.

I could open a PR myself, if pointed in the right direction.

__Demo link/slider setting__: 
(top-level config object)
```
{
  arrowKeys: true,
  controls: ["", ""],
  container: ".js__slider",
  controlsContainer: ".js__controls",
  navContainer: ".js__nav",
  items: 1,
  loop: false,
  speed: 900
}
```

(responsive config object)
```
{
  768: {
    edgePadding: 18,
    gutter: 25,
    fixedWidth: 681,
    items: 1
  },
  1280: {
    edgePadding: 33,
    gutter: 40,
    fixedWidth: 1134,
    items: 1
  },
}
```

_Tiny-slider version_:   `"tiny-slider": "~2.6.0"`
_Browser name && version_:  Google Chrome Version 65.0.3325.181
_OS name && version_: macOS Sierra 10.12.6

add custom event(s) for breakpoints

__Issue description__:  
I've got an slider with 6 items. The slider slides with 4 items at a time (so sliding by page).
I want custom navigation, so I used a navContainer with 6 items just like the original navigation. But it shows 6 dots instead of 2 (the original shows 2 dots). The original works with a hidden="true" on some tags, but when I use this on my custom dots it doesn't work. 

__Demo link/slider setting__:   
```
<div class="c-pagination__dots c-pagination--products__dots u-display--inline o-list-bare o-list-inline">
    <button data-nav="0" tabindex="0" aria-selected="true" aria-controls="tns1-item0" type="button" class="c-pagination__dot link--none u-display--block tns-nav-active"></button>
    <button data-nav="1" tabindex="-1" aria-selected="false" aria-controls="tns1-item1" type="button" class="c-pagination__dot link--none u-display--block" hidden=true></button>
    <button data-nav="2" tabindex="-1" aria-selected="false" aria-controls="tns1-item2" type="button" class="c-pagination__dot link--none u-display--block" hidden=true></button>
    <button data-nav="3" tabindex="-1" aria-selected="false" aria-controls="tns1-item3" type="button" class="c-pagination__dot link--none u-display--block" hidden=true></button>
    <button data-nav="4" tabindex="-1" aria-selected="false" aria-controls="tns1-item4" type="button" class="c-pagination__dot link--none u-display--block"></button>
    <button data-nav="5" tabindex="-1" aria-selected="false" aria-controls="tns1-item5" type="button" class="c-pagination__dot link--none u-display--block" hidden=true></button>
    <button data-nav="6" tabindex="-1" aria-selected="false" aria-controls="tns1-item6" type="button" class="c-pagination__dot link--none u-display--block" hidden=true></button>
</div>
```

```
var slider = tns({
        container: '.c-slider--products',
        items: 4,
        slideBy: 'page',
        autoplay: true,
        nav: true,
        navContainer: '.c-pagination--products__dots',
        controls: false
      });
```
_Tiny-slider version_:   Chrome  63.0.3239.84
_Browser name && version_:  Chrome latest version
_OS name && version_:   OSX Sierra 10.12.6
  

[Bug] Navigation with page slider

__Issue description__:  
Just updated from v2.6.0 and noticed that the responsive behavior has changed from the active slide remaining centered to being left aligned at the breakpoint.

source markup:
```html
<div class="slider-container relative">
    <ul class="p-0 py-8 m-0 mb-8 list" data-testimonial-slider>
        {{ testimonials_card }}
        <li class="slide">
            <div class="flex br-2 bs-solid bw-1 bc-ocean-40 bg-white bs-soft grab ov-hidden slide-content">
                <div class="m--flex-grow-1 m--w-50 bg-slate-40 bg-center bg-cover" style="background-image: url('{{ image }}');"></div>

                <div class="px-4 py-8 m--flex-grow-1 m--w-50">
                    <img src="{{ logo }}" class="block h-2 w-auto mb-8">
                    <h4 class="title lh-4 fs-5 m-0 mb-4">{{ heading }}</h4>
                    <blockquote class="fs-3 body lh-3 slate-80 m-0 mb-8">
                        {{ quote | markdown }}
                        <cite class="fs-normal">&mdash; {{ cite }}</cite>
                    </blockquote>

                    <a href="{{ link_url }}" class="body link ocean fs-4 fw-500 hover-link-border bc-ocean">
                  {{ link_text }}
                  <i class="rarr bc-ocean"></i>
                </a>
                </div>
            </div>
        </li>
        {{ /testimonials_card }}
    </ul>
</div>
```

source js:
```js
import { tns } from 'tiny-slider/src/tiny-slider.module'

const spacer = 16
const spacer2 = spacer * 2

const slider = tns({
  container: '[data-testimonial-slider]',
  controls: false,
  edgePadding: spacer,
  gutter: spacer,
  items: 1,
  mouseDrag: true,
  navContainer: '[data-testimonial-slider-nav]',
  slideBy: 'page',
  speed: 600,

  responsive: {
    720: {
      edgePadding: spacer,
      fixedWidth: (spacer * 45) - (spacer2 * 2),
    },
  },
})

export default slider
```

Production markup producing desirable behavior via tiny-slider@2.6.0
```html
<div class="slider-container relative">
    <div class="tns-outer tns-ovh">
        <div class="tns-inner" id="tns1-iw" style="margin: 0px 168px;">
            <ul class="p-0 py-8 m-0 mb-8 list tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" data-testimonial-slider="" id="tns1" style="transform: translateX(-4224px);">
                <li class="slide tns-item" aria-hidden="true" tabindex="-1">...
```

Production markup producing undesirable behavior via tiny-slider@2.8.6
```html
<div class="slider-container relative">
    <div class="tns-outer" id="tns1-ow">
        <div class="tns-ovh">
            <div class="tns-inner" id="tns1-iw">
                <ul class="p-0 py-8 m-0 mb-8 list tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" data-testimonial-slider="" id="tns1" style="transform: translate3d(-4704px, 0px, 0px); transition-duration: 0s;">
                    <li class="slide tns-item" aria-hidden="true" tabindex="-1">...
```

From what I can tell the the margin style is no longer being applied to the element `#tns1-iw` element. Was there a new method for centering slides that undocumented?

__Demo link/slider setting__: 
Left align (undesirable) behavior:
![screen recording 2018-09-04 at 15 47](https://user-images.githubusercontent.com/1235252/45056956-f1328d00-b059-11e8-9cca-d74c868b6e07.gif)

Centered (desirable) behavior: https://www.activecampaign.com/

_Tiny-slider version_: 
`2.8.6`

_Browser name && version_:  
Chrome Version 68.0.3440.106

_OS name && version_:   
macOS High Sierra 10.13.6

Center slide horizontally at breakpoint

__Issue description__:  The arrow keys still work while focus is on the `.tns-controls` element, visible in the demo pages.

Furthermore the up/down arrow keys change the slides in horizontal sliders and they also scroll the screen up/down which seems like very confusing behaviour.

__Demo link/slider setting__:   http://ganlanyuan.github.io/tiny-slider/tests/index.html

_Tiny-slider version_:   2.8.6
_Browser name && version_:  Chrome v69.0.3497.92
_OS name && version_:   macOS High Sierra Version 10.13.6

Arrow Keys still work while option is disabled and focus is on .tns-controls

__Issue description__:  I've no idea why you add the "tabindex" attribute to everything. It's too bad! You just killed keyboard navigation...


You just killed the accessibility!

There is some debug code in minified code which is just here for debug

Code is here :
https://github.com/ganlanyuan/tiny-slider/blob/master/src/tiny-slider.js#L970

Shouldn't just be hidden by `.tns-visually-hidden` but really not present. Not necessary.

_Tiny-slider version_:   2.9.x

help wanted

Remove debug in prod code

Vanilla javascript slider for all purposes, inspired by Owl Carousel.

tiny-slider

Generating block with div's inside slider, per 4 divs on one slide, when it's many, there are some problem with last slide, it's cutted (transform: translate3d having wrong value).
When I get 1,2,3 slide everything OK, like this
![image](https://user-images.githubusercontent.com/23053513/44898325-3fb4f400-ad07-11e8-9513-8089ac4c3966.png)

But when i go to last slide (4) i see
![image](https://user-images.githubusercontent.com/23053513/44898363-61ae7680-ad07-11e8-9c9a-9de9cfc7be58.png)

It's not going to the end, and I don't see last image fully

_Tiny-slider version_:   2.8.6
_Browser name && version_:  in all browsers (chrome/firefox..)
_OS name && version_:   Ubuntu 16, Windows 10

Here is config

```
let slider = tns({
                mode: 'carousel',
                container: sOffers,
                slideBy: 'page',
                fixedWidth: 160,
                gutter: 0,
                edgePadding: 0,
                controlsText: ['', ''],
                autoHeight: true,
                loop: false,
                items: (countOffers < 4) ? countOffers : 4, // default number of items
                responsive: false,
                controlsContainer: floorWrapper.querySelector('.s-tns-controls'),
                nav: false,
                lazyload: true
            });
```

Carousel cuts off part of the last element of the slide

__Issue description__:  Slides have extra offset in Microsoft Edge. 

__Demo link/slider setting__:   

```
var slider = tns({
      container: '#liftoff-slider',
      controlsContainer: '.liftoff-slider-controls',
      mode: 'gallery',
      items: 1,
      slideBy: 'page',
      autoplayText: [
        "Play",
        "Pause"
      ],
      autoplay: true,
      autoplayButton: '.liftoff-slider-play',
      speed: 500,
      nav: false,
      lazyload: true
    });
```

See [here](http://ganlanyuan.github.io/tiny-slider/tests/index.html#animation1_wrapper), for example.

Looks like this was an issue previously (see [Issue #190](https://github.com/ganlanyuan/tiny-slider/issues/190)). I wonder if something got reverted, or Edge updated something "helpful."

_Tiny-slider version_:   2.8.6 (loaded via CDN: https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/min/tiny-slider.js)

_Browser name && version_:  Microsoft Edge 42.17134.1.0, Microsoft EdgeHTML 17.17134

_OS name && version_:   Windows 10 Pro

Love tns!

Thansk!

Extra Offset in Microsoft Edge

__Issue description__:  
Sometimes on swipe, carousel won't go to another slide. It just stays in the middle of event. Problem occurs only on Ipad. See below:
![ipad-issue](https://user-images.githubusercontent.com/42766851/46724577-39088d80-cc72-11e8-8f56-b4e0375ee577.gif)


__Demo link/slider setting__:   

http://developer.royalcanin.com/test.html

Options passed to slider:
`    let options = {
      container: galleryWrapper,
      slideBy: 'page',
      loop: false,
      items: 6,
      mouseDrag: true,
      controlsText: [
        `<span class="rc-carousel__direction rc-carousel__direction--prev rc-btn rc-btn--icon rc-icon rc-left rc-iconography" aria-label="${prevlabel}"><span class="rc-screen-reader-text">${prevlabel}</span></span>`,
        `<span class="rc-carousel__direction rc-carousel__direction--next rc-btn rc-btn--icon rc-icon rc-right rc-iconography" aria-label="${nextlabel}"><span class="rc-screen-reader-text">${nextlabel}</span></span>`
      ],
items: 4
    };`

_Tiny-slider version_:  
 
"tiny-slider": "^2.8.7"
_Browser name && version_:  

Safari on Ipad
_OS name && version_:   
ios

Swipe doesn't work properly on Ipad

__Issue description__:  Nav controls don't provide clear instructions for use and interactive elements can't be tabbed to (ie. prev/next buttons).

For non-sighted users, the container might be good enough to use for controlling the slides, however there's no prompt for the user to tell them that they can use the left and right arrow keys to switch slides. We can make better use of the aria-label here or potentially use aria-description, however I don't think that has full support across screen readers.

For sighted keyboard users, aria-labels won't matter and the user will naturally try to navigate to the buttons. However, there's no way for the user to get there since the tabindex is set to -1.

_Tiny-slider version_:   latest

Accessibility - nav controls don't have a natural usage

__Issue description__:  
The keyboard controls move all sliders that are on the page regardless of the specificity of the slider call. For example: a news article slider and a photo gallery (different instances and classes) will change slides at the same time based on keyboard input.

It appears that the cause of this is the document being targeted instead of the slider instance. Is it possible that we can specify keyboard usage on focus?

```
Line 1059: 
if (arrowKeys) { addEvents(doc, docmentKeydownEvent); }

Line 2265: 
function onDocumentKeydown (e) {
    e = getEvent(e);
    switch(e.keyCode) {
      case KEYS.LEFT:
        onControlsClick(e, -1);
        break;
      case KEYS.RIGHT:
        onControlsClick(e, 1);
    }
  }
```

**Documentation**
`For better accessibility, when a prev/next button is focused, user will be able to control the slider using left/right arrow keys.`


__Demo link/slider setting__:   
arrowKeys: true,

_Tiny-slider version_: **2.8.7**
_Browser name && version_:  **Chrome**
_OS name && version_:  **Mac**

Accessibility / UX - Keyboard controls for multiple sliders on same page

__Issue description__:  
If set loop to "true" the slider goes one Item to far (to the last cloned item).
You can see this on the pagination - in the example i have 3 Items but the slider goes 4.

Loop = false, then the slider goes to the last item - in the case of the example to the last item number 3 (so it is correct) and not the "virtual" 4th like with loop = true.

__Demo link/slider setting__:   
https://jsfiddle.net/Teisi/e13n9xcd/17/

_Tiny-slider version_:   2.9.1
_Browser name && version_:  Chrome 74.0.3729.157
_OS name && version_:   Windows 10

Slider goes one item to far if loop: true

__Issue description__:  There's something wonky happening in the aria-live region where it will say "slide 6 of 5" which is confusing since there are only 5 slides.

_Browser name && version_:  all browsers

Accessibility issue with number  of slides read in live region

I'm seeing a lot of these errors on some specific chrome versions. Unfortunately, I haven't been able to reproduce it myself:

HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

It's happening with this code (and the error is inside the tns slider block):

https://eb.frmt.dk/static/v2/test.htm

_Tiny-slider version_:   2.9.1

_Browser name && version_:  

Chrome 78.0.3904.70
Chrome 77.0.3865.120

_OS name && version_:   Windows 10

HierarchyRequestError on latest Chrome

When I use arrow key navigation on a slider, all Sliders on the current Page slide, too.

slider settings:
{
  arrowKeys: true,
  autoplay: false,
  autoplayHoverPause: true,
  container: "#cclt__events__event-list",
  speed: 600
}
Tiny-slider version:   2.9.2
Chrome 78

All Sliders on the page slides if arrowkey Navigation is used

__Issue description__:  
Slider doesn't work on iPhones newer than X (XS, XR, etc) with autoHeight option enabled.
Nav arrows and dots are not generated when autoHeight enabled and horizontal touch scroll doesn't work. 

__Demo link/slider setting__:   
tns({
            container: container,
            controlsText: ['', ''],
            nav: true,
            controls: true,
            touch: true,
            autoHeight: true
        })

_Tiny-slider version_:   
2.9.2

_Browser name && version_:  
Both Safari and Chrome

_OS name && version_:   
iOS 12 & 13

Slider doesn't work on iPhones newer than X (xs, xr, etc) with autoHeight enabled

when clicking an navAsThumbnails as video it is played in navAsThumbnails but not main window. as right tiny-slider can work with HTML5 video? in main plaed with js command play. but first i see black square in main after slide and navAsThumbnails.

black square when using HTML5 video in navAsThumbnails

I noticed when testing this slider on safari voiceover that the carousel keeps interrupting to tell the user it has changed slider. While very useful this can also be quite annoying for a non sighted user who is trying to listen through the page if used with the autoplay feature for example. It would be good if we could choose to change the aria-live setting for situations where the slider is rapid and could be annoying to the user.

Quote from : https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
"Normally, only aria-live="polite" is used. Any region which receives updates that are important for the user to receive, **but not so rapid as to be annoying**, should receive this attribute. The screen reader will speak changes whenever the user is idle."



Add an option to change aria-live setting.

Can you please add class to 
`<div class="tns-nav" aria-label="Carousel Pagination" style="display: none;" > `

when it changes to have the ability to change the sibling's elements if no controls (like padding, etc if we set nav on the sides)
or there is exists some jquery event?


Thanks

Class for hidden navigation

__Issue description__:  autoplayHtmlStrings should be configurable

_Tiny-slider version_:   2.9.4
_Browser name && version_: All, Any
_OS name && version_:   All, Any

It is possible to define a node/selector where the autoplay button will be inserted but yet it seems impossible to use custom markup.
```javascript
{
    autoplayTimeout: 8000,
    autoplayHoverPause: true,
    autoplayButtonOutput: false,
    autoplayButton: '#my-autoplay-button',
}
```
The outerHTML of the defined container is used to insert the ´data-action="start|stop"` and insert the static content to the innerHTML.

```javascript
// strings are defined like this
autoplayHtmlStrings = ['<span class=\'tns-visually-hidden\'>', ' animation</span>']

// and then build on updateAutoplayButton()
autoplayButton.innerHTML = autoplayHtmlStrings[0] + action + autoplayHtmlStrings[1] + txt;
```

What about making the `autoplayHtmlStrings` configurable via options? That would make it very easy to implement customized buttons with icons

[Feature request] Customizable autoplayButton markup

__Issue description__:  slides are lowering google insights score because of Accessibility, is it possible to avoid using [aria-*] attributes ? same thing for buttons, they don't have an aria label if i changed the controlsText to svg icons
_Tiny-slider version_:   2.9.4
_Browser name && version_:  Any
_OS name && version_:   Any

![image](https://github.com/ganlanyuan/tiny-slider/assets/52933934/44eaf42a-f8c4-4cf4-a881-18dd233cb104)
![image](https://github.com/ganlanyuan/tiny-slider/assets/52933934/780bccec-e754-4e7b-89d4-49841a8264b0)



[aria-*] attributes do not match their roles 

I have a simple slider setup to expand to 100% height:

```
<section class="slider">
    <div class="header-slider-controls tns-controls">
        <button data-controls="prev" tabindex="-1" aria-controls="tns1"><i class="fas fa-chevron-left"></i></button>
        <button data-controls="next" tabindex="-1" aria-controls="tns1"><i class="fas fa-chevron-right"></i></button>
    </div>
    <div class="header-slider">
        <div class="slide" style="background-image: url(/media/fa4lfyej/shutterstock_208088251_africa_morocco_mpaharika.jpg)">
            <a class="content-wrapper" href="">
                <p>some text</p>
            </a>
        </div>
        <div class="slide" style="background-image: url(/media/4legplnz/shutterstock_1195370017_europe_norway_winter_harbor.jpg)">
            <a class="content-wrapper" href="">
                <p>some text</p>
            </a>
        </div>
    </div>
</section>

```

Using these settings:

```
<script>
    var slider = tns({
        container: '.header-slider',
        items: 1,
        slideBy: 'page',
        autoplay: true,
        autoplayButtonOutput: false,
        autoplayTimeout: 7500,
        controlsContainer: '.header-slider-controls'
    });
</script>
<style type="text/css">
    section.slider { display: block; height: 100%; 100%; }
    .slider, .header-slider { height: 100%; }
    .header-slider div.slide { color: #fff; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center /* 50% 40% */; position: relative; }
    .header-slider div.slide .content-wrapper { position: absolute; width: 100%; height: 100%; top: 0px; bottom: 0px; color: #fff !important; display: flex;  }
    /* misc */
    .tns-nav { text-align: center; margin: 10px 0; position: absolute; bottom: 10px; width: 100%; z-index: 999; }
    .tns-nav > [aria-controls] { width: 11px; height: 11px; padding: 0; margin: 0 5px; border-radius: 50%; background: #ddd; border: 0; }
    .tns-nav > .tns-nav-active { background: #999; }
    .tns-controls { position: absolute; z-index: 998; height: 50%; width: 100%; display: flex; align-items: flex-end; justify-content: space-between;}
    .tns-controls:hover button { opacity: 1; }
    .tns-controls button { font-size: 3em; color: #fff; background: rgba(255,255,255,0.2); padding: .25em; border: none; opacity: 0.75; }
    .tns-controls button:hover { background: rgba(255,255,255,0.4); }
</style>
```

If I add a `<!DOCTYPE html>` the slider renders slides with 0px height.

The only workaround I found so far is adding this style:

```
.tns-outer, .tns-ovh, .tns-inner, .tns-slider { height: 100%; }
```
__Demo link/slider setting__:   

_Tiny-slider version_:  2.9.3 and 2.9.4
_Browser name && version_:  Tested on Firefox, Edge, Chrome

Defining HTML doctype breaks slider 100% height

When navigating through slides using keyboard tabbing, the Tiny‑Slider does not properly update the slider state (dots, next/prev button enable/disable state). The slider appears to function correctly visually when clicked via mouse, but fails to maintain accessibility consistency for keyboard and screen reader users.

**Steps to Reproduce**

1. Initialize a basic Tiny‑Slider with multiple slides (e.g., 5 slides visible 1 at a time).
2. Use keyboard navigation (Tab key) to move focus through slides: Start from the first slide and keep pressing Tab to move focus sequentially across all slides.
3. Observe the following issues:

**Actual Behavior (Issues Observed)**

**Issue 1 – Dot Navigation Not Updating**
- As you tab through slides, the dot indicator (pagination) remains stuck at the first dot.
- Even if the focus is on the last slide, the active dot is still the first one.

**Issue 2 – Next/Prev Button State Incorrect**

- Even when the focus is on the last slide, the Next button remains enabled and the Prev button remains disabled (initial state).
- Slider state is not syncing with keyboard navigation.

**Issue 3 – Focus Moves Out of Slider Instead of going to next/prev  button**

- When focus reaches the last slide and you press Tab again, the focus moves out of the slider completely.
- Expected Behavior: After the last slide, the focus should move to the prev button, and if again tab clicked then only exit from the slider

**Issue 4 – No Proper Accessibility Handling**

- The slider does not update aria-selected, aria-hidden, or tabindex attributes dynamically when tabbing through slides.
- This creates confusion for screen reader users as the visual slide and accessibility state are out of sync.

**Expected Behavior**

- Dot indicator should update to reflect the currently focused slide.
- Next/Prev buttons should enable/disable correctly based on the slide currently in focus.
- Tabbing should follow natural focus order:
- After the last slide → Next button
- After Next button → Out of the slider (or loop back based on implementation choice)
- ARIA attributes & tabindex should dynamically update to match the visible/active slide for better accessibility support.

**Environment**

- Tiny‑Slider Version: 2.9.4
- Browser(s): Chrome 138
- OS:  macOS
- Assistive Technology: Keyboard only (tested with Tab key)

Fails to maintain accessibility consistency for keyboard and screen reader users.

### Final files are too different
I've forked and followed the README in the collab section regarding just fixing and making a PR for the fix.
I can successfully edit the files and see file changes as expected with the watch and build processes.

However, the minified and dist versions of the final js are not being built as a module.

I've looked back at the history of several files to see why this could be happening but I am still non the wiser.

Is there an actual issue or is there another build script that isn't documented and I can't work out how to run?


As a result, other than my intended changes, I don't think the PR I have raised will get accepted and merged even though it is quite an important fix for adhering to the EU Accessibility Act
https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/union-equality-strategy-rights-persons-disabilities-2021-2030/european-accessibility-act_en

https://github.com/ganlanyuan/tiny-slider/pull/861




tiny-slider

42 GitHub issues

Open issues

Links