Slick carousel moving nav dots

Question

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?

Misstate

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 – Casabonne

You can also do this with bootstrap – Erotogenic

My current project doesn't use bootsrap... – Misstate

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. – Argillaceous

Answer 1

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.net/1gLn1cbg/

Linders

Answer 2

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 accomplish 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.

Marrero

Do you use slick.js to make this work? github.com/kenwheeler/slick/blob/master/slick/slick.js – Mode

? I can see that you use some classes from slick but i am not sure because of no documentations. @Swarad Mokal – Mode

So yes I do make use of slick classes to make it work. If you check the code it uses the events and methods provided by slick to make the logic work. – Marrero

Hi, your approach is great. I just wonder what should be updated to keep the blue active dot in the middle (third position) instead of forth. – Robbyrobbyn