Javascript 如何控制循环2？

朋友，我想用cycle 2 slideshow插件做一周的事情，但每次都失败了，让我告诉你我想做什么，我正在尝试做分类幻灯片。我的cycle 2旋转木马上有过滤器（你将在示例中看到）

我有3个类别（或超过3个）

同时，我的图像具有数据id属性

data-id="sports",data-id="naturel",data-id="animals",data-id="blabla.."

在这一点上，我不能做我想做的事

如果我单击“li#sports”，则幻灯片上必须仅显示数据id=“sports”img和缩略图

或者，如果我单击li#animals，则幻灯片上必须仅显示data id=“animals”img和缩略图

我尝试使用jquery，但什么也没发生

$（文档）.ready（函数（）{
$（“.filter li”）。打开（“单击”，函数（）{
var activeId=$（this.attr（“id”）；
$（“img[data id]”）隐藏（）；
$（“img[data id='”+activeId+“']”）show（）；
});
});
。单个库{
宽度：800px；
溢出：隐藏；
位置：相对位置；
}
.循环幻灯片放映img{
宽度：100%；
高度：234px；
最大宽度：100%；
}
#单页机{
宽度：49.3px！重要；
高度：49.3px！重要；
边框：1px实心#fff；
}
#单寻呼机a.循环-寻呼机-主动img{
不透明度：0.4；
}
#单左，
#单一权利{
位置：绝对位置；
最高：50%；
z指数：1000；
背景：rgba（255,255,255,8）；
填充：12px；
光标：指针；
}
#单左{
左：0；
}
#单一权利{
右：0；
}
.过滤器{
位置：绝对位置；
z指数：1000；
右：0；
排名：0；
填充：0；
颜色：#FFF；
背景：rgba（255，255，255，0.6）；
填充：10px 30px；
}
李先生{
列表样式类型：无；
光标：指针；
显示：内联块；
背景：rgba（0,0,0,6）；
填充物：5px；
}

上
下一个

体育运动
自然
动物

即使您在要隐藏的元素上设置了
显示：无
（使用
.hide（）
），插件仍将它们设置为
显示：块
，因为初始化滑块时，它们都是合格的幻灯片

动态删除/添加幻灯片似乎不是一种非常简单的方法

我采取的方法是在要隐藏的幻灯片上设置
data hidden=“true”
，然后重新初始化滑块，使其仅将与
img[data hidden=“false”]
匹配的图像用作幻灯片

我将下面的代码添加到css中，这样隐藏的幻灯片就不会显示在幻灯片下方

img[data-hidden="true"]{
  display: none;
}

我还获取了cycle div中的所有其他
data-
属性，并将其类重命名为
mySlideShow
，以便在需要时使用
$（'.mySlideShow'）.cycle（{…}）
方法呈现循环

这里应该有一个工作示例：
非常感谢您，您已经完全理解了我想要的内容，这是一个很好的示例我想知道的另一件事是，这并不重要，我如何通过单击“全部”按钮再次显示所有幻灯片？
data-id="sports",data-id="naturel",data-id="animals",data-id="blabla.."

img[data-hidden="true"]{
  display: none;
}