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)

score 2 · Accepted Answer · answered Feb 04 '14 at 18:44

2

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.

answered Feb 04 '14 at 18:44

Sarvagnya

385
1
3
9

I posted the lines in my answer (see below) just in case the code grows or changes and then the setting will no longer be found "on line 10". – adelriosantiago Aug 10 '14 at 05:34

Shiva · Answer 2 · 2014-02-04T13:36:48.863

0

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.

enter image description here

edited Feb 04 '14 at 13:36

answered Feb 04 '14 at 13:29

Shiva

20,575
14
82
112

it works when the size is reduced but does not work when the size is increased. I want to set the "li"s a certain width and the carousel has to show max number of items within the given 'wrapper' size. – Sarvagnya Feb 04 '14 at 13:46
till 3 it is fine, after 3 it does not increase to four, then five, six based on the size of the main wrapper – Sarvagnya Feb 04 '14 at 18:00

score 0 · Answer 3 · edited May 23 '17 at 10:28

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.

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

3 Answers3