最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Slick carousel moving nav dots - Stack Overflow

programmeradmin4浏览0评论

I am using carousel and I need to limit dots number to 8 even if there more than 8 slides.

Nav dots should have arrows to the left and to the right that suggest user that there are more dots to show.

Can anybody suggest a solution / had similar experience in customizing nav dots with slick?

I am using http://kenwheeler.github.io/slick carousel and I need to limit dots number to 8 even if there more than 8 slides.

Nav dots should have arrows to the left and to the right that suggest user that there are more dots to show.

Can anybody suggest a solution / had similar experience in customizing nav dots with slick?

Share Improve this question edited Jan 17, 2017 at 11:48 br3t 1,6582 gold badges21 silver badges28 bronze badges asked Oct 14, 2015 at 10:27 Giuseppe CazzatoGiuseppe Cazzato 1091 gold badge1 silver badge11 bronze badges 4
  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself. See How to create a Minimal, Complete, and Verifiable example – Paulie_D Commented Oct 14, 2015 at 10:31
  • You can also do this with bootstrap – Mario Kurzweil Commented Oct 14, 2015 at 10:32
  • My current project doesn't use bootsrap... – Giuseppe Cazzato Commented Oct 14, 2015 at 10:33
  • 1 you can go for Slider Syncing example of slick-slider, and use dots as slider-nav for slider-for, it will do the trick for you. – vivekkupadhyay Commented Oct 14, 2015 at 10:38
Add a ment  | 

2 Answers 2

Reset to default 3

I came up with a solution to limit the number of dots to three using 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;
}

Of course this can be made pretty with preprocessors but it is working.

Working fiddle: http://jsfiddle/1gLn1cbg/

I recently developed something like this, you can restrict this to as many dots as you like. I have done it for 5 dots, after that additional dots are not shown, but scroll when your main slides scroll.

You can use the init and change events to acplish this.

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

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

Working example: https://codepen.io/swarad07/pen/xmzQKm

This is very similar to how Instagram does it, with edge dots smaller in size.