Slick dots в виде иконок с circle progress bar и текстом
Есть дизайн-макет первого экрана сайта. Задача такая, чтобы при нажатии стрелок/свайпе менялись фото и основной текст (в левой верхней части макета). А остальное оставалось на месте (кнопки, стрелки, dots). Но тут решения, кажется, нет. И ладно - пусть слайдятся все элементы.
Вопрос в другом: как реализовать в Slick-слайдере доты в виде иконок с круговой анимацией? Да так, чтобы рядом с каждой еще и текст размещался? Естественно, при смене слайдов анимация переходит на следующий кружок и тд.
Второй день голову ломаю, ничего не могу придумать. На codepen есть похожее решение, но там не совсем мой случай (ссылка, к сожалению, не прошла).
Помогите, пожалуйста, разобраться - как это сделать!
Ответы (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 вы задаете круговую анимацию. Продолжительность анимации, зависит от того, какое время показа слайда у вас выбрано в настройках слайдера. Все.