Non-image content

[CJYate]

Hi, I have followed the documentation on the main site and have only been able to create a carousel containing images. It seems the following is false, unless we're missing some key detail:

jCarousel expects a very basic HTML markup structure inside your HTML document:

<div class="jcarousel">
    <ul>
        <li>...</li>
        <li>...</li>
    </ul>
</div>
Note:

The documentation refers to the elements as root element, list element and item element(s):

<div class="jcarousel"> <--------------------------------| Root element
    <ul> <-------------------------------| List element  |
        <li>...</li> <---| Item element  |               |
        <li>...</li> <---| Item element  |               |
    </ul> <------------------------------|               |
</div> <-------------------------------------------------|
This structure is only an example and not required. You could also use a structure like:

<div class="mycarousel"> <-------------------------------| Root element
    <div> <------------------------------| List element  |
        <p>...</p> <-----| Item element  |               |
        <p>...</p> <-----| Item element  |               |
    </div> <-----------------------------|               |
</div> <-------------------------------------------------|
The only requirement is, that it consists of a root element, list element and item elements.

JCarousel appears to do nothing unless it finds images. Is there an undocumented switch to make this work? Otherwise this script is useless for me; I may need to try Cycle2 or something else.

Thanks!

Chris

[jsor]

Please setup a reproducible test case on jsfiddle or similar.

[CJYate]

OK I think this shows it. I was wrong about the images; it does seem to scroll the text in UL/LI blocks, but the divs don't work. I've copied stuff from your "skeleton" example

http://jsfiddle.net/CJBrewer/eyd0psfb/13/

I'm wondering whether spans would work here...

Thanks in advance

[CJYate]

PS I added another case. Now I think I understand why my real version is not working! I had not set [li] to have a fixed width, which seems necessary. With textual content it just expands to fill the space, 20000px or whatever.

But the question still stands, why Div > [ Div > content ] doesn't work as advertised! :-) Is it a matter of the right css to make it all sit alongside with fixed widths?...

[jsor]

http://jsfiddle.net/eyd0psfb/21/

I've update the CSS and the HTML structure for the pure div solution.