滑動傳送帶移動導航點

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/