jCarousel responsive slider - how to increase the number of visible items (docs instructions not working)

Question

Here's the fiddle: http://jsfiddle.net/sarvagnya1/T9cXQ/

here's the code: HTML:`

<div class="wrapper">
   <div class="jcarousel-wrapper">
      <div class="jcarousel">
        <ul>
            <li> <img src="img1"/> </li>
            <li> <img src="img2"/> </li>
        </ul>
      </div>
    </div>
</div>

Currently there are 3 items being displayed. when the size of the container is increased the three items only increase in size but the number of items remain the same. According to the docs( http://sorgalla.com/jcarousel/docs/reference/usage.html) if the following code is inserted

.jcarousel li {
   float: left;
   width: 100px;

}

the listed item can be changed but as shown in the fiddle it does not work.

A true responsive slider should increase the number of items based on container size, are there any changes that can be made to make it responsive (the number of items have to increase based on the main container size)

Answer 1

I found the answer in the javascript file, jcarousel.responsive.js.

There is a setting on line 10 of the js file, the if statement is pretty apparent.

Answer 2

You just have to add the custom css to make the responsive slider work. I updated your fiddle. Check it out: http://jsfiddle.net/T9cXQ/1/

This is the relevant code you have to add in the css section.

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.jcarousel li {
    float: left;
    width: 100px;
}

Output: See screenshot below, how it increases number of items from 1 to 2 when screen is resized.

Answer 3

This setting can be found on the the file jcarousel.responsive.js, here is the Responsive Carousel example on GitHub https://github.com/jsor/jcarousel/tree/master/examples/responsive.

The lines

if (width >= 600) {
  width = width / 3;
} else if (width >= 350) {
  width = width / 2;
}

determine the quantity of items that will be shown on screens larger than 600 and 350 respectively, to show 4 elements on larger screens and only 3 on smaller screens (mobiles) you can use:

if (width >= 600) {
  width = width / 4;
} else if (width >= 350) {
  width = width / 3;
}

Also note that some users seem to change the setting "visible" (Setting number of visible images in jCarousel) this variable seems to make no changes on the responsive example.