Javascript Slick.js自定义分页挂钩和CSS

我目前正在使用Slick.JS和一些SVG插图构建一个滑块，我想知道当相关幻灯片处于活动状态时，让SVG元素改变填充颜色的过程是什么

下面的JS小提琴应该显示我现在的位置：

目前我有一个空白的if语句，我认为是正确的基础，但是我不能计算如何根据它们的数据幻灯片编号单独地对每个段元素进行定位。我在这里有一个填充变化，以前改变了CSS，但它只改变了第一部分

谢谢你的帮助

---

干杯

您正处于正确的轨道上，只需调整几个点：

1-使用slick

afterChange

事件内部声明，您可以接收

currentSlide

参数

2-您可以使用

$（“[data slide='”+dataId+“]]”）来获取索引所引用的元素（currentSlide），通过此操作，创建一个控件，该控件基于类操纵svg：

var dataId = currentSlide;
var svgs = $('a[data-slide]');
var slideno = $("[data-slide='" + dataId + "']");

svgs.find('.active').removeClass('active');
slideno.find('path').addClass('active');

3-幻灯片索引从0开始，更新HTML
数据幻灯片

4-此外，您的HTML没有关闭
标记

最后一点：
我不知道我是否正确理解了您想要做的事情，但是如果要检索与当前幻灯片相对应的svg，那么更改下面的变量就足够了：
var slideno=$（'a[data slide=“'+dataId+'”）
嘿-谢谢！抱歉，如果我在最初的帖子中不清楚，我正在尝试使SVG填充颜色与当前显示的幻灯片同步更改-因此，例如，在第一张幻灯片上，第一段将为红色，以指示其处于活动状态。我试图在这里实现您的代码行，但我仍然不确定在if语句中考虑该目标的实际过程。伙计，我让您的findle更改SVG颜色，点击链接：如果这解决了你的问题，我将为你的答案创建一个响应。这通过一些调整来修复它，以使幻灯片编号正确匹配（第一张幻灯片的索引返回为0等）-这是更新版本，谢谢你的帮助！非常感谢你能接受我的回答，把这个问题标记为解决了吗？非常感谢。
var dataId = currentSlide;
var svgs = $('a[data-slide]');
var slideno = $("[data-slide='" + dataId + "']");

svgs.find('.active').removeClass('active');
slideno.find('path').addClass('active');