How to make active all slick dots before the current one?

Question

css

https://codepen.io/brezze/pen/oNvaKGy

It is necessary that the active class of slick dots remains on all previous slides.

For example, if we click on the third slide, the active class remains at the first, second, and third dots. If we are on slide 4, the active class is for all points. If on the first, only on the first and so on.

Answer 1

By default, let the buttons be red (like active), and recolor those that are located after the active one in blue (inactive):

.slick-dots {
  li button {
    background-color: red;
  }

  li.slick-active ~ li button {
    background-color: blue;
  }
}