从jCarousel插件中删除项目

我有一个关于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); 

这应该工作！

Answer 2

我把你的两个答案结合起来，因为没有一个对我有用

我在我的init自定义函数中添加了它

 carousel.removeAndAnimate = function(i) { var counter = 1; var itemsHTML = new Array(); var e = this.get(i); children = e.parent().find("li"); $(e).remove() $.each(children,function(){ if(counter != i) { itemsHTML[counter] = $(this).removeAttr("class").removeAttr("jcarouselindex"); } counter++; }); this.size(this.options.size -1); this.reset(); counter = 1; carousel = this; $.each(itemsHTML, function(k, v){ if(v != null) { carousel.add(counter, v[0].innerHTML); counter++; } }); this.reload(); } 

它运作良好..

您可以添加更多改进，例如滚动回刚刚移除位置的项目。

Answer 3

 $.jcarousel.fn.extend({ removeAndAnimate: function(index) { var itemsHTML = new Array(); var counter = 0; // Me guardo los que quedan for(i = 0; i < this.size(); i++) { if(i != (index - 1)) itemsHTML[counter++] = $('li[jcarouselindex|="' + i + '"]').html(); } // Configuro uno menos y borro todo this.size(this.options.size -1); this.reset(); // Vuelvo a cargarlos counter = 0; for(i = 0; i < itemsHTML.length; i++) { this.add(counter++, itemsHTML[i]); } this.reload(); } }); 

用法

 var carousel = jQuery('#mycarousel').data('jcarousel'); carousel.removeAndAnimate(1); 

Answer 4

我发现白盒的问题来自哪里。 JCarousel方法format（）不替换类名，只是添加新名称。 我已经重写了这个函数，它适用于我：

 format: function(e, i) { // remove all class names matches 'jcarousel-item' at the start $(e)[0].className = $(e)[0].className.replace(/\bjcarousel\-item.\d-*?\b/g, ''); // add new class names var $e = $(e).addClass('jcarousel-item').addClass('jcarousel-item-' + i).css({ 'float': 'left', 'list-style': 'none' }); $e.attr('jcarouselindex', i); return $e; } 

Answer 5

我的另一个解决方案是在我加载的内容中添加一个类，并删除DOM中没有此类的所有项。 一旦被carousel.reset() “移除”，这些元素就会系统地丢失添加的类。

然后，您将能够删除白色框：

 $("li:not(.the_class)").remove(); 

在carousel.add()函数之后添加它。

它运作良好，你甚至不需要添加任何function到你的旋转木马。

这是一个“易于使用”的解决方案，单击prev / next按钮可能会显示一个白色框。 要删除它，请在回调buttonNextCallback / buttonPrevCallback上应用相同的解决方案。