Translatable/Extendable dot navigation instructions

[programmer6]

There does not appear to be a way to extend the sr-only text for dot navigation.

Current markup generated the string "Go to slide' is embedded:

<ul class="slick-dots" style="">
  <li class="slick-active"><button type="button" aria-current="true">
      <span class="slick-dot-icon" aria-hidden="true"></span>
      <span class="slick-sr-only">Go to slide 1</span>
    </button>
  </li>
  <li>
    <button type="button">
      <span class="slick-dot-icon" aria-hidden="true"></span>
      <span class="slick-sr-only">Go to slide 2</span>
    </button>
  </li>
</ul>

There should be something similar to the previous next buttons where a method is provided to override this text at the time the carousel is instantiated.

For example here I am instantiating a carousel within Drupal and utilizing Drupal's translate function to provide alternative language support for the previous/next buttons:

var srPrevious = '<span class="slick-sr-only">' + Drupal.t('Previous') + '</span>';
var srNext = '<span class="slick-sr-only">' + Drupal.t('Next') + '</span>';
$('#accessible-carousel').slick({
        dots: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        prevArrow:'<button class="slick-prev slick-arrow" type="button"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i>' + srPrevious + '</button>',
        nextArrow:'<button class="slick-next slick-arrow" type="button"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>' + srNext + '</button>',
});

the above works well, I just wish the slide dots had a similar feature. In addition to that it would be great if the goto slide text was more descriptive (maybe include a title for that slide). Current workaround is to add a slide description data-element on the initial slide div then use javascript to lift and shift the contents of that to update the slide dot sr-only text.

[fschroiff]

$('#accessible-carousel').slick({
        ...
    customPaging( _slider, i ) {
        return $( '<button type="button">'
                + '<span class="slick-dot-icon" aria-hidden="true"></span>'
                + '<span class="slick-sr-only">Gehe zu Bild ' + ( i+1 ) + '</span>'
            + '</button>' );
    },
});

See here: https://github.com/Accessible360/accessible-slick/blob/master/slick/slick.js#L61-L66