ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Feature request] Customizable autoplayButton markup

TheNaderio opened this issue · comments

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.

{
    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.

// 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

I'm struggeling with every part while making this more accessible.

The navString thats used to aria-label the navigation-dots, aren't customizable.
I think all of this hard-coded strings should be easily customizable without attaching to the events and change it everytime a slide changes?

image