An easy way to translate slick-sr-only dots ?

[rianfloo]

Dear Jason, Thanks for your amazing accessible library!

I would like to use it on multi languages website but I need to translate wording inside dots <span class="slick-sr-only">Go to slide 9</span>

Do you have any suggestions or API able to do this?

Thanks a lot :)

[jasonwebb]

Hey Florian! Glad you're enjoying it!

At the moment, accessible-slick doesn't allow for custom slide dot markup to be provided the way you can for the previous/next arrows (using the prevArrow and nextArrow options), but you can freely modify whatever text you want by directly modifying the strings in the DOM after the library has loaded!

Here is a snippet that uses the init event to wait for the accessible-slick library to finish initializing, then loops through each slide dot element in the DOM and updates its inner text string with some translated text. Apologies for the auto-translated text, I'm sure it's not perfect :P

$('.carousel').on('init', function(e, slick) {
  slick.$dots[0].querySelectorAll('button .slick-sr-only').forEach(function(buttonText) {
    buttonText.innerText = buttonText.innerText.replace('Go to slide', 'Allez à la diapositive');
  });
});

You can test this snippet for yourself in this live example: https://codepen.io/A360/pen/e9fdac8bc02e1980b69165222e37f95c?editors=0010

Hope that helps!

[rianfloo]

Dear Jason, this is absolutely perfect!

Would be happy to contribute to your project if needed!

Thanks for your help. Florian

[jasonwebb]

Great!

Thanks for that! My hope is that there isn't much to do since this repo is just a thin layer on top of the original Slick package, but there are one or two minor bugs that I'm aware of. I'll look into capturing and tagging those issues as "bug" and "help wanted" soon. Feel free to get involved in those threads when you see them!