forked from kenwheeler/slick
-
Notifications
You must be signed in to change notification settings - Fork 51
Open
Description
The following represents the aria-labels used as of master 61b5322:
- List / Slider: The
aria-labelcan be customized with the optionregionLabel; however, if you do not set aregionLabelthen a hard coded "carousel" is used. - Item / Slide: The
aria-labelcannot customized. Thearia-labelis always set to "slide [number of slide]", example "slide 2".
Issues
- List / Slider: The markup could have a
aria-labeloraria-labelledbythat provides more details or is translated by a backend CMS (example Drupal). - Item / Slide: The hard coded value is not translatable and cannot be customized to provide a more specific label (example: "Image 1 of 5").
Desired Changes to support customizing the aria-labels
- List / Slider:
- If the slider element already has an
aria-labeloraria-labelledbythen the slick library should not override it with the hard coded "carousel" or theoptions.regionLabel.
- If the slider element already has an
- Item / Slide:
- Add a
options.customItemLabelfunction similar tooptions.customPagingthat is passed thesliderand the slide index. This would allow the caller to pass in a custom label function or use the default that would return "slide [number of slide]". - If the slide element already has an
aria-labeloraria-labelledbythen the slick library should not override it with theoptions.customItemLabel.
- Add a
Generic Example:
customItemLabel: function (slider, i) {
return 'Image ' + (i + 1) + ' of ' + slider.$slides.length;
}
Example with Drupal:
customItemLabel: function (slider, i) {
return Drupal.t('Image @index of @total', {
'@index': i + 1,
'@total': slider.$slides.length
});
}
LarsShift
Metadata
Metadata
Assignees
Labels
No labels