Как сделать активными все slick dots до текущей активной?

Question

[Breeze1]

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

Нужно, чтобы выделялась как активная не только slick dot, соответствующая текущему слайду, но предыдущие.

Например, если мы кликаем на третий слайд, активными становятся первая, вторая и третья точки. Если мы на четвёртом слайде, активны все точки. Если на первом, только первая и так далее.

Answer 1

[0xD34F]

По умолчанию кнопки пусть будут красными (типа активные), а те, что расположены после активной перекрашиваете в синий (неактивные):

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

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

Comments

[Breeze1]

Отличное решение, спасибо )

Answer 2

[Виталий Першин]