Semantic feature | Set the tag element which wrap the slides

[HectorLS]

In order to improve the semantic of the user sliders, would be great to have an option like

 flickitySliderTag:  'dl' | 'ul' | 'ol' | 'div' 

Right now i can use a main wrapper as <ol> for example, but thats wrong, since library add two divs before actually appending the slides, and the <li> must be direct child of <ol> or <ul> (See permitted content for <ol> on developer.mozilla.org)

The desired result is the following, see image (i just changed the tags with the inspector in the Demo page to create the sample)

[jQuevara]

I'm experiencing the same issue. It would be great if flickity could include a configuration option that allows consumers to define the wrapping element type. For additional context, here's what the W3C advises regarding carousel structure:

As a collection of content items, carousels are typically best represented as unordered lists, using <ul> and <li>. Depending on the context, other elements can also be used.

Given the above, accounting for the use of a <ul> and <li> mark-up would be much appreciated.

[LeeroyJenks]

We're having a similar issue here. A recent audit brought up a "false" positive of empty <ul>. Since We have our images in unordered lists, flickity will wrap the <li>s in <div>s and make the html semantically incorrect.

[desandro]

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

[desandro]

The easy part is making .flickity-slider a ul. I can do that no problem. The markup would look like

<ul class="carousel flickity-enabled">
  <div class="flickity-viewport">
    <ul class="flickity-slider">
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</ul>

The hard part is what to do with the original container .carousel element. There is no JavaScript API to change an element tag. You would have to create a new element and replace the previous one. I don't think that's a good approach as it could break other client JavaScript set on the original .carousel element.

So - would you perfer <ul> ...

1. On both .carousel and .flickity-slider (make the change)
2. Just .carousel (keep as is)

[HectorLS]

Hello @desandro, I don't see how could break.

Current code

Line 182 from https://github.com/metafizzy/flickity/blob/master/js/core.js https://github.com/metafizzy/flickity/blob/master/js/core.js#L182

// slider positions the cells
proto._createSlider = function() {
  // slider element does all the positioning
  let slider = document.createElement('div');
  slider.className = 'flickity-slider';
  this.slider = slider;
};

My proposal

Use the initials options object that user have, to pass a new key value as i suggested in the first comment with a default value as 'div' (remaining the same as now to avoid problems for other people who do not want to change layout if they update for a recent version).

type TypeSliderTag = 'div' | 'ul' | 'ol' | 'dl'
let { sliderTag:TypeSliderTag } = this.options;

// ....

let slider = document.createElement(sliderTag ?? 'div');

Since the library CSS is based on the classes, not on the element tags shouldn't be no problem with the layout broken or anything.

This is just my humble opinion.

[GaEhrlich127]

Is there any update on this? Also running into this issue where I'd like to have slider elements be <li> for accessibliity, but there's still no support for <ul>.