jCarouselLite - Forcing List Items onto Single Line

Question

I am using jCarousellite on a list on a website I am building. It works perfectly, however the issue is that for some reason, the script is causing List Items to stop stacking.

What I mean by this is - instead of this:

li     li
li     li

I am getting this:

li     li     li      li

It works fine when I remove the script, but with it, its forcing them all onto a single "line". I've looked through the script and cannot figure out what part is forcing them all onto a single line.

Here is the script: http://www.trekradio.net/dev/wp-content/themes/tr2012/js/jcarousellite_1.0.1.js

You can also see a demo of the problem here in the "Whats On" Section of the Heaer: http://www.trekradio.net/dev/ (this site is under construction so forgive its state).

EDIT: Setting the "vertical" option to "true" in the script changes the carousel scrolling to vertical AND displays the list items like this, which is not what I want:

li

li

li

li

I would imaging this is to do with the plugin making the `li` elements `float`, instead of `block` or `inline-block` — Rory McCrossan, May 21 '12 at 15:21
They need to be floated. Without the script, I have them floated left and they display as I want. I tried adding "display:block" and "display:inline-block" but it didn't make a diff. — Zach Nicodemous, May 21 '12 at 15:24

Justin T. · Accepted Answer · 2012-05-25T08:37:43.777

UPDATED : [ugly fix]

here is the line you need to update in jcarousellite_1.0.1.js (you add the tiny / 2 bit) :

    var ulSize = liSize * itemLength / 2;                   // size of full ul(total length, not just for the visible items)

Beware since it will impact all other Carousels in any other page.

UPDATE 2 : backward compatible fix

I patched the .js file, and you can use option lines in your code, or leave it with 1 line by default :

<script type="text/javascript">
$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        lines : 2
    });
});
</script>

Here is the patched jcarousellite_1.0.1.js

Good luck !

--

I am afraid that this would bend jCarouselLite a little too far.

I would advise you to split the li in two ul, by PHP or even by manipulating the DOM in Javascript/jquery.

This way, you can achieve your goal by setting up two parallel horizontal carousels running together.

Hope this helps !

@ZachNicodemous : you are welcome, I learnt something too ! bounties do work sometimes :) — Justin T., May 25 '12 at 13:01

jCarouselLite - Forcing List Items onto Single Line

1 Answers1