Owl 轮播 2:过滤项目,但使用 Javascript 保持排序顺序

Owl Carousel 2: filtering items, but keep the sort order using Javascript

我目前正在使用 Owl Carousel 2 并将其与此过滤示例相结合以创建一个过滤器菜单,当单击过滤器菜单列表中的标题时,轮播中的所有其他项目都会消失。 这非常有效,除了当单击 SHOW 并且所有项目 return 到轮播时它们不按照它们开始的顺序。

Owl 轮播 2 http://www.owlcarousel.owlgraphic.com/docs/api-options.html

过滤器 http://www.xcast3d.com/spotlight/bootstrap-carousel-filter/

我需要他们保持排序顺序。也许有更好的方法来简单地使用 css display:none 来过滤它们?但我不确定如何写这个。也许有人可以帮助我更改此脚本或想出更好的过滤解决方案来保持顺序。非常感谢

我找到的解决方案是复制隐藏 div 中的所有项目,并在过滤时清空轮播,然后仅按初始顺序再次添加过滤后的元素。

在这里 Fiddle 工作:http://jsfiddle.net/TWtwt/301/

$('#projects-copy .project.' + cat).each(function () {
   owl.addItem($(this).clone());
});