内容滑块：表，列表等的有效用法 [英] Content sliders: valid usage for tables, lists, etc

问题描述

内容滑杆，例如 bxslider 或Bootstrap的旋转木马，请使用 div s定义幻灯片。这对于图像和许多其他元素是很好的，但它对列表或表（或许更多）等事情没有多大意义。

---

列举示例＃1：

 < div>< !- slider container  - > 
< ul> 
< div class =active><！ - 目前显示的幻灯片 - > 
< li> Blah< / li> 
< li> Blah< / li> 
< li> Blah< / li> 
< / div> 
< div><！ - 另一张幻灯片 - > 
< li> Blah< / li> 
< li> Blah< / li> 
< / div> 
< / ul> 
< / div> 
  

这无效。

---

列举示例＃2：

 < div>< - > 
< div class =active><！ - 目前显示的幻灯片 - > 
< ul> 
< li> Blah< / li> 
< li> Blah< / li> 
< li> Blah< / li> 
< / ul> 
< / div> 
< div><！ - 另一张幻灯片 - > 
< ul> 
< li> Blah< / li> 
< li> Blah< / li> 
< / ul> 
< / div> 
< / div> 
  

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

---

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

是否有一种使用表/列表的有效标记创建内容滑块的方法？*

---

$

$ b $ b

解决方案

使用< section> -stuff：

 < div><！ -  slider container  - > 
< section><！ - 目前显示的幻灯片 - > 
< p> Blah，blah，blah！< / p> 
< / section> 
< section><！ - 另一张幻灯片 - > 
< p> Blah，blah，blah！< / p> 
< / section> 
< / div> 
  

A < ul> 因为信息是一个列表。
幻灯片列表？我不能形象更多，你用几个字显示一个图像。然后，只需< p> 。

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

解决方案

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>.

这篇关于内容滑块：表，列表等的有效用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！