Как можно сделать круглый прогресс бар в индикаторе карусели?

c0678431cd70472497fb3c90f8502582.png
Здравствуйте .
Хочу реализовать вот такое управление для слайдера, как это можно сделать ? Если есть какие-то реализации - пожалуйста подскажите .

Для меня единственным приятным вариантом показалась бутстраповская карусель, совместно с этим плагином. Но есть небольшая проблема. Как вы можете заметить, необходимо сделать 2 состояния: play/pause. А при нажатии на .active li в carousel-indicators, слайдер автоматически начинает cycle. Это так же касается элементов внутри li, какой бы з-индекс я не ставил . Клик обрабатывается на кнопку внутри li и сам li.

Любые варианты будут кстати! Ссылки на подобный материал - так же были бы кстати.
  • Вопрос задан
  • 3972 просмотра
Решения вопроса 2
@dohera
Фронтенд разработчик
только что думал над этим вопросом и сделал такое решение.
разделил 360 на 20 и получился прогресс бар с интервалом в 5%;
можно сделать меньше интервал увеличив максимальное 360 / число блоков.
без JS, только CSS3
jsfiddle.net/SergeyGuns/ttk8o0fa
Ответ написан
@DragorWW
Front-end Developer
можно через stroke в svg circle, и уже через js крутите параметры как вам нужно
Демо
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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