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

jQuery Circular Content Carousel "ca-content-item" width

本文关键字：ca-content-item 宽度 循环 jQuery      更新时间：2023-09-26

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

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

但是，当我单击"更多"时，我不知道在哪里修改div - ca-content-wrapper的宽度，以便在单击"更多"时使其全宽！

感谢您的帮助！

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

但是，当我关闭扩展项目时，右侧的最后两个手边不显示原始项目（请参阅链接对于我在说什么）。

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

请帮忙

在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 文件上修改此值。

另外，你必须更改以下代码：

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;
}
相关文章：