Slick dots в виде иконок с circle progress bar и текстом

Рейтинг: -1Ответов: 1Опубликовано: 28.02.2025

Есть дизайн-макет первого экрана сайта. Задача такая, чтобы при нажатии стрелок/свайпе менялись фото и основной текст (в левой верхней части макета). А остальное оставалось на месте (кнопки, стрелки, dots). Но тут решения, кажется, нет. И ладно - пусть слайдятся все элементы.

Вопрос в другом: как реализовать в Slick-слайдере доты в виде иконок с круговой анимацией? Да так, чтобы рядом с каждой еще и текст размещался? Естественно, при смене слайдов анимация переходит на следующий кружок и тд.

Второй день голову ломаю, ничего не могу придумать. На codepen есть похожее решение, но там не совсем мой случай (ссылка, к сожалению, не прошла).

Помогите, пожалуйста, разобраться - как это сделать! введите сюда описание изображения

css javascript html slider slick.js
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

У slick slider есть такой кусок кода отвечающий за dots (это можно посмотреть в devtools браузера):

<ul class="slick-dots" style="display: block;" role="tablist">
  <li class="slick-active" aria-hidden="false" role="presentation" aria-selected="true" aria-controls="navigation10" id="slick-slide10"><button type="button" data-role="none" role="button" tabindex="0">1</button></li>
  <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation11" id="slick-slide11" class=""><button type="button" data-role="none" role="button" tabindex="0">2</button></li>
  <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation12" id="slick-slide12"><button type="button" data-role="none" role="button" tabindex="0">3</button></li>
</ul>

Таким образом, после того как завершится генерация кода слайдера, вам нужно задать позицию точек, ul.slisk-dots уже имеет position: absolute. Активная точка имеет класс slisk-active, для этого класса в своем CSS вы задаете круговую анимацию. Продолжительность анимации, зависит от того, какое время показа слайда у вас выбрано в настройках слайдера. Все.