光滑的轮播移动导航点

Question

我正在使用http://kenwheeler.github.io/slick轮播，我需要将点数限制为8，即使有超过8张幻灯片。

导航点应该在左侧和右侧有箭头，表示用户需要显示更多的点。

任何人都可以建议解决方案/在使用光滑的自定义导航点方面有类似的经验吗？

Answer 1

我想出了一个solution来使用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;
}

当然，这可以通过预处理器完成，但它正在运行。

工作小提琴：http://jsfiddle.net/1gLn1cbg/

Answer 2

我最近开发了类似的东西，您可以将其限制为任意多个点。在没有显示其他点之后，我已经完成了5个点的设置，但是当您的主幻灯片滚动时会滚动。

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

slickSlider.on('init', function (event, slick) {

slickSlider.on('beforeChange', function (event, slick) {

工作示例：https://codepen.io/swarad07/pen/xmzQKm

这与Instagram的做法非常相似，只是边缘点的尺寸较小。