html - 内容 slider : valid usage for tables, 列表等

Question

内容 slider ，例如 bxslider或 Bootstrap 的 carousel , 使用 div 定义幻灯片。这对于图像和许多其他元素非常有用，但对于列表或表格(可能还有更多)之类的东西没有多大意义。

---

列表示例#1:

<div><!--slider container-->
    <ul>
        <div class="active"><!--currently shown slide-->
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
        </div>
        <div><!--another slide-->
            <li>Blah</li>
            <li>Blah</li>
        </div>
    </ul>
 </div>

这是无效的。

---

列表示例#2:

<div><!--slider container-->
    <div class="active"><!--currently shown slide-->
         <ul>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
         </ul>
    </div>
    <div><!--another slide-->
         <ul>
            <li>Blah</li>
            <li>Blah</li>
         </ul>
    </div>
 </div>

这是有效的，但没有意义，从可访问性的 Angular 来看很差，等等。

---

是否有跨多张幻灯片分布表格、列表等的正确方法？

有没有一种方法可以使用表格/列表的有效标记来创建内容 slider ？*

---

也许 HTML5 带来了一些有用的东西(但我对此表示怀疑)。

* CSS 标签的原因

Answer 1

使用 <section> -东西:

<div><!--slider container-->
    <section><!--currently shown slide-->
        <p>Blah, blah, blah!</p>
    </section>
    <section><!--another slide-->
         <p>Blah, blah, blah!</p>
    </section>
    </div>

A <ul>很好，因为信息是一个列表。你滑动列表吗？我无法想象你用几句话展示了一张图片。然后，就<p> .