带有jcarousel的多行

Question

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

Answer 1

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

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: '<div></div>',
        buttonPrevHTML: '<div></div>',
        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的调用:

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel( {
        scroll: 1,
        moduleWidth: 75,
        rows:2,        
        animation: 'slow'
    });
});

</script>

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

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

轮播html定义需要如下所示:

<div class="wrapper">
    <ul id="mycarousel0" class="jcarousel-skin-tango">
     ...<li></li>
     </ul>
</div>

感谢Webcidentes

Answer 2

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

代码添加到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 );

希望这可以帮助,

托尼狄龙