jCarousel响应滑块 - 如何增加可见项的数量（文档说明不起作用）

Question

这是小提琴：http://jsfiddle.net/sarvagnya1/T9cXQ/

这是代码： 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>

目前正在显示3个项目。当容器的尺寸增加时，三个项目的尺寸仅增加，但项目的数量保持不变。根据文档（http://sorgalla.com/jcarousel/docs/reference/usage.html），如果插入以下代码

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

}

列出的项目可以更改，但如小提琴所示，它不起作用。

真正的响应式滑块应该根据容器大小增加项目数量，是否可以进行任何更改以使其响应（项目数量必须根据主容器大小增加）

Answer 1

我在javascript文件jcarousel.responsive.js中找到了答案。

js文件的第10行有一个设置，if语句非常明显。

Answer 2

您只需添加自定义css即可使响应滑块正常工作。我更新了你的小提琴。看看：http://jsfiddle.net/T9cXQ/1/

这是您必须在css部分添加的相关代码。

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

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

输出：请参阅下面的屏幕截图，在调整屏幕大小时，如何将项目数量从1增加到2。

Answer 3

此设置可在文件jcarousel.responsive.js上找到，这是GitHub https://github.com/jsor/jcarousel/tree/master/examples/responsive上的自适应轮播示例。

行

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

确定将分别在大于600和350的屏幕上显示的项目数量，以便在较大的屏幕上显示4个元素，在较小的屏幕（手机）上显示3个元素：

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

另请注意，某些用户似乎更改了“可见”设置（Setting number of visible images in jCarousel），此变量似乎对响应示例没有任何更改。