VoxelGod
@VoxelGod
Настройка шаблонов WordPress

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

Привет. Начал работать со Slick slider и не удалось сделать border для точек (dots) для переключения слайдов. Как бы я там не менял стандартные настройки, никак не выходила рамка, которая бы действительно оборачивала эту самую точку.
Буду крайне признателен, если вы прикрепите код для правильной стилизации тех самых dots.
Заранее спасибо!
  • Вопрос задан
  • 22262 просмотра
Решения вопроса 1
dpigo
@dpigo
Front-end developer
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 из темы и править где надо.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы