Javascript 圆滑的旋转木马移动导航点

我使用旋转木马，我需要限制点数为8，即使有超过8张幻灯片

导航点应该有向左和向右的箭头，以提示用户有更多的点要显示

有没有人能提出一个解决方案/有过类似的使用slick定制导航点的经验

我想出了一个方法，使用CSS将点数限制为三个

/* hiding all bullets by default */
.slick-dots li {
    display: none
}
/* only displaying the active bullets and the 2 bullets next to it */
.slick-dots li.slick-active,
.slick-dots li.slick-active + li,
.slick-dots li.slick-active + li + li {
    display: block;
}
/* displaying the last three bullets when slick-active class isn't applied to any li before them  */
.slick-dots li:nth-last-child(1),
.slick-dots li:nth-last-child(2),
.slick-dots li:nth-last-child(3) {
    display: block;
}
/* hiding the last three bullets if slick-active exist before them */
.slick-dots li.slick-active ~ li:nth-last-child(1),
.slick-dots li.slick-active ~ li:nth-last-child(2),
.slick-dots li.slick-active ~ li:nth-last-child(3) {
    display: none;
}
/* specific conditions to always display the last three bullets */
.slick-dots li.slick-active + li + li:nth-last-child(3),
.slick-dots li.slick-active + li + li:nth-last-child(2),
.slick-dots li.slick-active + li + li:nth-last-child(1),
.slick-dots li.slick-active + li:nth-last-child(3),
.slick-dots li.slick-active + li:nth-last-child(2),
.slick-dots li.slick-active + li:nth-last-child(1){
    display: block;
}

当然，这可以通过预处理器实现，但它正在工作

工作小提琴：

我想出了一个方法，使用CSS将点数限制为三个

/* hiding all bullets by default */
.slick-dots li {
    display: none
}
/* only displaying the active bullets and the 2 bullets next to it */
.slick-dots li.slick-active,
.slick-dots li.slick-active + li,
.slick-dots li.slick-active + li + li {
    display: block;
}
/* displaying the last three bullets when slick-active class isn't applied to any li before them  */
.slick-dots li:nth-last-child(1),
.slick-dots li:nth-last-child(2),
.slick-dots li:nth-last-child(3) {
    display: block;
}
/* hiding the last three bullets if slick-active exist before them */
.slick-dots li.slick-active ~ li:nth-last-child(1),
.slick-dots li.slick-active ~ li:nth-last-child(2),
.slick-dots li.slick-active ~ li:nth-last-child(3) {
    display: none;
}
/* specific conditions to always display the last three bullets */
.slick-dots li.slick-active + li + li:nth-last-child(3),
.slick-dots li.slick-active + li + li:nth-last-child(2),
.slick-dots li.slick-active + li + li:nth-last-child(1),
.slick-dots li.slick-active + li:nth-last-child(3),
.slick-dots li.slick-active + li:nth-last-child(2),
.slick-dots li.slick-active + li:nth-last-child(1){
    display: block;
}

当然，这可以通过预处理器实现，但它正在工作

---

工作提琴：

我最近开发了类似的东西，你可以将它限制为任意多个点。我已经做了5个点，之后其他点不会显示，但当主幻灯片滚动时滚动

您可以使用init和change事件来完成此操作

slickSlider.on（'init'，函数（event，slick）{

slickSlider.on（'beforeChange'，function（event，slick）{

工作示例：

---

这与Instagram的做法非常相似，边缘点的大小更小。

我最近开发了类似的东西，您可以将其限制为任意数量的点。我已经做了5个点，之后不再显示其他点，而是在主幻灯片滚动时滚动

您可以使用init和change事件来完成此操作

slickSlider.on（'init'，函数（event，slick）{

slickSlider.on（'beforeChange'，function（event，slick）{

工作示例：

---

这与Instagram的做法非常相似，边缘点的大小更小。

寻求代码帮助的问题必须包含在问题本身中复制代码所需的最短代码。请看，您也可以使用我当前的项目来完成此操作，但不使用bootsrap…您可以使用滑动条同步示例slick Slider，并将点用作

滑动条r-nav

对于

slider for

，它将为您提供帮助。寻求代码帮助的问题必须包括在问题本身中复制它所需的最短代码。请看，您也可以使用我当前的项目来执行此操作，但不使用bootsrap…您可以使用slick slider的滑块同步示例，并使用圆点作为

slider nav

f或者

的滑动条，它会帮你解决问题。你是否使用slick.js来实现这一点？我可以看到你使用了slick中的一些类，但我不确定，因为没有文档。@Swarad MokalSo是的，我确实使用slick类来实现它。如果你检查代码，它会使用slick提供的事件和方法来实现逻辑工作。你好，你的方法很棒。我只是想知道应该更新什么来保持蓝色活跃点在中间（第三位置）。不是forth。你使用slick.js来实现这一点吗？我可以看到你使用了slick中的一些类，但我不确定，因为没有文档。@Swarad MokalSo是的，我确实使用slick类来实现它。如果你检查代码，它会使用slick提供的事件和方法来实现逻辑。嗨，你的方法很好。我知道我不知道应该更新什么来保持蓝色活跃点在中间（第三个位置）而不是第四个。