带有jcarousel的多行

我正在尝试使用jcarousel来构建一个包含多行的容器，我尝试过一些东西但没有运气。 有人可以就如何创建它提出任何建议吗？

Answer 1

我们不得不做出类似的修改。 我们通过扩展默认选项，包括行值和每个项目的宽度（我们称之为模块）然后将宽度除以行数来实现。

代码添加到jCarousel函数…

添加到默认选项：

moduleWidth: null, rows:null, 

然后在创建jCarousel时设置：

 $('.columns2.rows2 .mycarousel').jcarousel( { scroll: 1, moduleWidth: 290, rows:2, itemLoadCallback: tonyTest, animation: 'slow' }); 

查找和编辑以下行：

 $.jcarousel = function(e, o) { if (li.size() > 0) { ... moduleCount = li.size(); wh = this.options.moduleWidth * Math.ceil( moduleCount / this.options.rows ); wh = wh + this.options.moduleWidth; this.list.css(this.wh, wh + 'px'); // Only set if not explicitly passed as option if (!o || o.size === undefined) this.options.size = Math.ceil( li.size() / this.options.rows ); 

希望这可以帮助，

托尼狄龙

Answer 2

这是根据@Sike的.js代码替换和我的一点点，高度没有动态设置，现在是。

 var defaults = { vertical: false, rtl: false, start: 1, offset: 1, size: null, scroll: 3, visible: null, animation: 'normal', easing: 'swing', auto: 0, wrap: null, initCallback: null, setupCallback: null, reloadCallback: null, itemLoadCallback: null, itemFirstInCallback: null, itemFirstOutCallback: null, itemLastInCallback: null, itemLastOutCallback: null, itemVisibleInCallback: null, itemVisibleOutCallback: null, animationStepCallback: null, buttonNextHTML: '
', buttonPrevHTML: '
', buttonNextEvent: 'click', buttonPrevEvent: 'click', buttonNextCallback: null, buttonPrevCallback: null, moduleWidth: null, rows: null, itemFallbackDimension: null }, windowLoaded = false; this.clip.addClass(this.className('jcarousel-clip')).css({ position: 'relative', height: this.options.rows * this.options.moduleWidth }); this.container.addClass(this.className('jcarousel-container')).css({ position: 'relative', height: this.options.rows * this.options.moduleWidth }); if (li.size() > 0) { var moduleCount = li.size(); var wh = 0, j = this.options.offset; wh = this.options.moduleWidth * Math.ceil(moduleCount / this.options.rows); wh = wh + this.options.moduleWidth; li.each(function() { self.format(this, j++); //wh += self.dimension(this, di); }); this.list.css(this.wh, wh + 'px'); // Only set if not explicitly passed as option if (!o || o.size === undefined) { this.options.size = Math.ceil(li.size() / this.options.rows); } } 

这是在jscarousel下载中使用代码包的static_sample.html的调用：

如果您需要更改轮播的内容并重新加载轮播，则需要执行以下操作：

 // Destroy contents of wrapper $('.wrapper *').remove(); // Create UL list $('.wrapper').append('
') // Load your items into the carousellist for (var i = 0; i < 10; i++) { $('#carouselist').append('
Item ' + i + '
'); } // Now apply carousel to list jQuery('#carousellist').jcarousel({ // your config }); 

轮播html定义必须如下所示：

 
 
 ...
 
  

感谢Webcidentes

Answer 3

你可能想看看serialScroll或localScroll而不是jcarousel。

Answer 4

我在Google网上论坛上发现了这个post，其中包含多行的工作版本。 我用过这个，效果很好。 http://groups.google.com/group/jquery-en/browse_thread/thread/2c7c4a86d19cadf9

Answer 5

我尝试了上面的解决方案，发现改变原来的jCarousel代码很麻烦 – 它为我引入了错误行为，因为它与jCarousel的一些function（如连续循环等）不相​​称。

我使用了另一种效果很好的方法，我认为其他方法也可以从中受益。 这是我用来创建li项目以支持jCarousel的JS代码，其中多行具有优雅的项目流，即水平填充，然后垂直填充，然后是scrollpages：

123 | 789
456 | 0AB

它将（var carouselRows的值）项添加到单个li中，因此允许jCarousel支持多行而不修改原始jCarousel代码。

 // Populate Album photos with support for multiple rows filling first columns, then rows, then pages var carouselRows=3; // number of rows in the carousel var carouselColumns=5 // number of columns per carousel page var numItems=25; // the total number of items to display in jcarousel for (var indexpage=0; indexpage 

在此代码填充了带有li项的ul之后，应该调用jCarousel。

希望这有助于某人。

乔纳森

Answer 6

如果您需要针对固定或一次性要求的快速解决方案，但绝对不需要更改可能会不时更新的核心库代码，则以下内容可能适用。 要在旋转木马上将以下六个项目分成两行：

 
contents
 
contents
 
contents
 
contents
 
contents
 
contents 

你可以使用一个小的JS将div包装成两组LI组然后初始化轮播。 您的方案可能允许您在服务器上进行分组并非总是可行。 显然，您可以将此扩展到您需要的许多行。

 var $pArr = $('div.item'); var pArrLen = $pArr.length; for (var i = 0;i < pArrLen;i+=2){ $pArr.filter(':eq('+i+'),:eq('+(i+1)+')').wrapAll('
'); };