Open programmer6 opened 2 years ago
$('#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
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:
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:
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.