Content sliders: valid usage for tables, lists, et

问题:

Content sliders, like bxslider or Bootstrap's carousel, use divs to define slides. This is great for images and many other elements but it doesn't make much sense for things like lists or tables (and probably more).

---

List example #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>

This is not valid.

---

List example #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>

This is valid but just does not make sense, is poor from an accessibility point of view, and so on.

---

Is there a right way of spreading tables, lists, etc. across multiple slides?

Is there a way of creating a content slider using the valid markup for a table/list?*

---

Perhaps HTML5 brings something to the table which could help (but I doubt it).

* Reason for the CSS tag

回答1:

Use the <section>-stuff:

<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> is fine, as the information is a list. Do you slide lists? I can't image more you show a image with a few words. Then, just <p>.