滑动传送带移动导航点

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/