0

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

Community
  • 1
  • 1
Adam Lynch
  • 3,341
  • 5
  • 36
  • 66
  • Do you want to equally distribute the list items for each slide? – Praveen Kumar Purushothaman Aug 28 '12 at 10:22
  • @PraveenKumar Nope. In my case, I'm actually using a table but for this example a list is just simpler but carries the relevance to the problem. So, for example, I'd like a maximum of 10 table rows per slide. If there's 15 then there would be 10 in the first, 5 in the second. – Adam Lynch Aug 28 '12 at 10:26
  • Ah... That's what I asked. In that case, you NEED to do a heavy DOM traversal. Count the numbers, check the length, and append those inside the tables. Like, you need to give breaks, for instance, take this: `insert('
      ')` - some sort of it right?
     – Praveen Kumar Purushothaman Aug 28 '12 at 10:32
  • @PraveenKumar So you're suggesting that I display the table as is, then when the dom is ready: re-do the structure and split it into slides (by inserting `divs`, etc.)? It's still going to be invalid html though – Adam Lynch Aug 28 '12 at 11:24
  • I would also suggest splitting the table up into several tables after the DOM has loaded. I know there are sliders that allow for a single `ul` yet displaying any number of `li`s for each slide. With tables I don't see how it would be done though. – powerbuoy Aug 28 '12 at 15:20

1 Answers1

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

Mihai Iorga
  • 39,330
  • 16
  • 106
  • 107
Eddy Erkelens
  • 9
  • 2
  • I understand how to use a slider for text, images, etc. If your content is a list, then it should be a list. If your content is tabular data, show it in a table. I don't see why one shouldn't use a slider, personal styling preferences aside – Adam Lynch Aug 28 '12 at 10:24