Question

所以我找到了这个有用的jQuery Content Carousel（http://tympanus.net/Development/CircularContentCarousel/），我一直在寻找它。

我已将代码修改为从三个框到五个框： http://helpmyedu.com/test/

然而，当我点击“更多”时，我不知道在哪里修改div-ca-content-wrapper的宽度，以便在点击“more”时使其全宽！

感谢您的帮助！

更新------------------------------------- 到目前为止，我已设法显示扩展项目显示正确，并关闭前三个物品......

然而，当我关闭扩展项目时，右边的最后两个手边不显示原始项目（请参阅链接就我所说的而言。）

当扩展窗口打开时，我也有空格尝试向左或向右导航....

请帮忙

Answer 1

在jquery.contentcarousel.js中，使用chrome developer或Firebug，在CTRL + F之后找到ca-content-wrapper。

当你找到这个时，你有

openItem    : function( $wrapper, $item, opts, cache ) {
                cache.idxClicked    = $item.index();
                // the item's position (1, 2, or 3) on the viewport (the visible items) 
                cache.winpos        = aux.getWinPos( $item.position().left, cache );
                $wrapper.find('div.ca-item').not( $item ).hide();
                $item.find('div.ca-content-wrapper').css( 'left', cache.itemW + 'px' ).stop().animate({
                    width   : cache.itemW * 2 + 'px',
                    left    : cache.itemW + 'px'
                }, opts.itemSpeed, opts.itemEasing)
                .end()
                .stop()
                .animate({
                    left    : '0px'
                }, opts.itemSpeed, opts.itemEasing, function() {
                    cache.isAnimating   = false;
                    cache.expanded      = true;

                    aux.openItems( $wrapper, $item, opts, cache );
                });

            },

你可以看到：

   width    : cache.itemW * 2 + 'px',

尝试在此js文件上修改此值。

Answer 2

另外，你必须改变这段代码：

switch( val ) {
case 0          : return 1; break;
case cache.itemW        : return 2; break;
case cache.itemW * 2    : return 3; break;


}

并为要在内容包装器中显示的每个项目添加一行，在这种情况下，我想要显示4个项目，如下所示：

switch( val ) {
case 0          : return 1; break;
case cache.itemW        : return 2; break;
case cache.itemW * 2    : return 3; break;
case cache.itemW * 3    : return 4; break;

}

jQuery循环内容轮播“ca-content-item”宽度

2 个答案: