1

I came over a issue while using jCarouselLite with Bootstrap responsive.

The plugin initialization is basic:

$("#slider").jCarouselLite({
    auto: 800,
    speed: 1000,
    visible: 4
});

I have created a demo here where everything is working very fine, but when you resize the browser to a point where a grid column spans over full width, you will notice that the jCarouselLite elements starts acting funny.

The elements width are supersized.

Same can be viewed from the jsfiddle version too.

I have attached a image showing the size: Supersized jCarousel Elements

Any fix?

Starx
  • 77,474
  • 47
  • 185
  • 261
  • Have you thought about using another slider? There's one that comes packed with Twitter Bootstrap? I left an answer around a bunch of other options for sliders a little earlier http://stackoverflow.com/questions/14762770/responsive-jquery-ui-slider/14763315#14763315 – justinavery Feb 08 '13 at 00:19

1 Answers1

0

Since jCarouselLite isn't really intended as a responsive slider, your best bet would be to try an alternative which is more specifically set up for a responsive layout (and which will detect and react to viewport changes).

There's one specifically for Twitter Bootstrap that might suit well?

Saving that, the alternatives that I tend to use are:

  • RoyalSlider - it's paid-for but featureful!
  • bxSlider - free and released under the WTFPL license, this is the one I most commonly use now. It's very slightly more complex than RoyalSlider but ideal for use in commercial applications and very easy to extend.
johnkavanagh
  • 4,614
  • 2
  • 25
  • 37