jQuery「Owl Carousel」使用における<ul>と<li>の構造について

カル―セル実装におけるHTMLのリスト構造について教えてください。

こちらの見本サイト↓にあるように、

使い方

https://keitahirai.net/archives/473
サンプル
https://keitahirai.net/wp-content/uploads/2015/09/owlcarousel/basic/

横にコンテンツをカル―セルさせる「Owl Carousel」というjQueryプラグインを利用すると、

この元の構造↓が、

html
1<ul>
2  <li><img src=""></li>
3  <li><img src=""></li>
4  <li><img src=""></li>
5</ul>

このように↓なりますけど、(class名は省略)

html
1<ul>
2  <div>
3    <div>
4      <div>
5        <li><img src=""></li>
6      </div>
7      <div>
8        <li><img src=""></li>
9      </div>
10      <div>
11        <li><img src=""></li>
12      </div>
13    </div>
14  </div>	
15</ul>

このようなリスト構造はアリなのでしょうか？
またもしナシならばどのようにすべきでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

ホントはW3Cが出してるHTML5の仕様書読めという話なんですが、
ul 要素 - HTML5 Tag Referenceも正確な仕様を元にしているようで頑張っているサイト（だと思ってるので）こちらから抜粋しました。

ul 要素のコンテンツモデルは、0個以上の li 要素となります。

つまり、li 要素以外を直接の子要素とすることはできません...

という訳で質問文の通り禁止です。
公式ドキュメントを軽く読んだ所、そもそもul要素を使えなんて何処にも書いてないですね。
HTML5の書き方的にリストだと違反になるのでdivで表現するのが適切でしょう。

そもそもカルーセルってul>liで表現するのは現実的なのか？という問題があります。
CSS3の3D系のプロパティをフル活用して、ulをスロットのレーンみたいに加工し、liを貼り付けていくような作りに設計すればいけそうですが、
それ以外で終わりと始まりの繋がりを表現するのは死ぬほど難しいですからね……勝算が無い限りカルーセルをul>liで表現しないほうが良いと思います。

投稿2018/09/28 12:08