Limit Number Of Dots

[misterhamm]

Is there a way to limit the number of dots displayed regardless of the total number of slides? My client only wants three dots to be visible at any one time with the active marker starting over at the beginning once you hit the fourth slide.

Thanks!

[ahmadalfy]

This can be achieved 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/

[mcashley]

This looks like an answered support question. Closing.

[vonhutrong]

I have try above css but it doesn't work properly for my case. So I create this code, I hope that it's helpful :)

code

p/s: I cannot use insert code feature of comment blog to add highlight code

[nestorcolt]

@vonhutrong and where "listLinks.lenght" comes from ???

[vonhutrong]

@nestorcolt Sorry for my mistake. That is the number of the items. For example the number of all pictures on slide.

[swarad07]

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.

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

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

[pettrushkov]

@ahmadalfy this work only for next slides, but not previous.

[thedailycommute]

Try this one: https://codepen.io/thedailycommute/pen/oNogzdX.

A slightly updated version (that I developed on codepen.io, based on a fork of this pen: https://codepen.io/nazarkomar/pen/RdRjqJ) with a few bugfixes added to the original slick.js code, can be seen working here: https://www.infopedia.pt/apoio/artigos/$porto

[ahmu83]

Another way to limit the number of dots to visible in the viewport is by using the javascript scrollIntoView method. You will need to attach an afterChange event handler to the slick carousel.

var carousel = $('.carousel').slick(settings);

carousel.on('afterChange', function(event, slick, currentSlide) {
  var activeDotEl = $(event.target).find('.slick-dots').find('li.slick-active');
  activeDotEl.get(0).scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
});

codepen: https://codepen.io/ahmu83/pen/vYbaRzQ

[Wasif-Shahid9]

How to do this in react js i am still finding a solution anyone know?