在光滑的滑块中显示 instagram 样式点 [关闭]答案

【问题标题】：Show instagram style dots in slick slider [closed]在光滑的滑块中显示 instagram 样式点 [关闭]
【发布时间】：2018-02-11 11:03:22
【问题描述】：

我正在使用光滑的滑块来显示很多滑块项。我还需要使用点来显示项目的位置。目前，有很多点，我想像 instagram 那样显示这些点。

这就是我的意思：

应始终有最多 6 个可见点。从左侧的第一个开始。

有没有办法解决中间的 4 个点？目前我只能用它的类slick-active来处理活动点。但我需要活动点之前和之后的点。

【问题讨论】：

【解决方案1】：

我用 jQuery 开发了 Instagram Stick 滑块。您可以在此链接中使用。 https://github.com/SolvingMan/Instagram-Stick-Slider-jQuery

现场演示：

【讨论】：

虽然认为这可以解决问题，但最好再添加一些解释。
答案似乎不正确，我最近开发了类似的东西，您可以将其限制为任意数量的点。我已经完成了 5 个点，之后没有显示额外的点，但是当你的主幻灯片滚动时滚动。您可以使用 init 和 change 事件来完成此操作。 slickSlider.on('init', function (event, slick) { slickSlider.on('beforeChange', function (event, slick) { 工作示例：codepen.io/swarad07/pen/xmzQKm 这与 Instagram 的做法非常相似，边缘点的尺寸更小。查看此问题了解更多详情
查看这个问题了解更多详情stackoverflow.com/questions/33122912/…
reactjs中的react-slick怎么办？

【解决方案2】：

您可以使用 jquery 的 prev 和 next 函数来访问 prevoius 和 next 元素。

我在这里更新了你的 codepen 示例：link

$('li.slick-active').prev().css('background-color', 'red');
$('li.slick-active').next().css('background-color', 'orange');

【讨论】：