Как кастомизировать dots в Slick Slider?

Question

[Гриша Никольский]

Начал работать со Slick slider и не удалось сделать border для точек (dots) для переключения слайдов. Как бы я там не менял стандартные настройки, никак не выходила рамка, которая бы действительно оборачивала эту самую точку.
Буду крайне признателен, если вы прикрепите код для правильной стилизации тех самых dots.

Answer 1

[Anton Bobylev]

Dots в примерах с их сайта реализованы с помошью текстового символа, который описывается в селекторе .slick-dots li button:before

.slick-dots li button:before {
 font-family: 'slick';
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•'; /* <-- Вот этот символ */
  text-align: center;
  opacity: .25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Соответственно чтобы изменить обводку нужно либо играться с -webkit-text-stroke и реализовывать фоллбэк с помощью text-shadow (плохой вариант), либо заменить этот символ на SVG изображение и задавать цвета уже в SVG (хороший вариант).

Вариант с text-stroke: https://jsfiddle.net/mxssjfou/2/
Вариант с SVG: https://jsfiddle.net/mxssjfou/3/

PS задавать свою тему dots, отличную от той, что берется в примере нужно с помощью свойства dotsClass: 'my-dots-class' в настройках инициализации, но если нужно только слегка изменить - лучше скопировать CSS из темы и править где надо.

Comments

[Гриша Никольский]

Спасибо!