search

ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.
MIT License
5.26k stars 785 forks source link

[Feature request] Customizable autoplayButton markup #823

Open TheNaderio opened 1 year ago

TheNaderio commented 1 year ago

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

TheNaderio commented 1 year ago

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