从jCarousel插件中删除项目

Question

我有一个关于jCarousel插件的问题(来自sorgalla).如何以正确的方式从中删除项目？

你可以看到我已经走了多远这里.尝试删除一些项目,然后向右滚动,你最终会看到一个"emtpy scroll",这就是我想要摆脱的东西.

我尝试过使用remove(); jQuery函数而不是将css更改为display:none; 但是这会产生一个奇怪的白色空白区域.如果你看一下第400行的jquery.jcarousel.js,你会看到一个删除函数,但我不确定如何使用它.

任何帮助深表感谢.谢谢!

Answer 1

你的例子是有道理的,除非你走出插件的界限,jCarousel不知道更新自己.从文档中,您提到的remove()方法似乎可行.然而,我的试验我从来没有得到jCarousel对象实际上"做正确的事"并更新它的按钮,滚动等等.

因为这一切,我在jCarousel类上写了一个额外的方法来完成它.您调用removeAndAnimate(1)来删除轮播中的第一个项目并重建所有内容,以便启用/禁用next/prev按钮,即可.

另外值得注意的是,jCarousel提供的remove()函数可以防止您删除当前正在显示的项目,这正是我们想要做的事情(例如,允许用户通过点击它来从旋转木马中删除图像) .

removeAndAnimate(i)的实现:

removeAndAnimate: function(i) {

        var e = this.get(i);

        var d = this.dimension(e);

        if (i < this.first) this.list.css(this.lt, $jc.intval(this.list.css(this.lt)) + d + 'px');

        e.remove();
        this.options.size--;

        var di = this.options.visible != null ? Math.ceil(this.clipping() / this.options.visible) : null;
        var li = this.list.children('li');
        var self = this;

        if (li.size() > 0) {
            var wh = 0, i = this.options.offset;
            li.each(function() {
                self.format(this, i++);
                wh += self.dimension(this, di);
            });

            this.list.css(this.wh, wh + 'px');            
        }

        this.scroll(0,true);
        this.buttons();

    }

我建议在remove()实现之后直接放置它.要使用jQuery访问jCarousel实例本身,在回调函数之外:

var carousel = $("#mycarousel").data("jcarousel");
carousel.removeAndAnimate(1);

这应该工作!