Search code examples
javascriptjqueryhtmlcssjcarousel

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

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)

Solution

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