How to set up dots in slick slider?

Question

JavaScript

Greetings, the question is how to set up dots in the slick slider so that initially there would be, for example, 4 cards in the slider and all of them are displayed, the slider itself does not scroll, there are no buttons and navigation, but when we add another card, then the slider already starts scrolling and navigation appears (now the buttons work like that, but dots is visible all the time, even if the slider is not scrolling) actually

an example: https://codepen.io/g3nnadie/pen/vYKVJVW

I will be grateful for your help!

Answer 1

You can for example do this

const slidesCount = $('.sl__item').length;
$('.sl').slick({
  slidesToShow: 4,
  dots: 4 < slidesCount,
  responsive: [
    {
      breakpoint: 1470,
      settings: {
        slidesToShow: 3,
        dots: 3 < slidesCount,
      }
    }
  ]
});