内容滑块：表格，列表等的有效使用

Question

内容滑块（如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>

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

---

是否有正确的方法在多张幻灯片中传播表格，列表等？

有没有办法使用表/列表的有效标记创建内容滑块？*

---

也许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>

<ul>没问题，因为信息是一个列表。 你滑动列表吗？我无法想象您用一些单词显示图像。然后，只需<p>。