Как расположить круги навигации на каждом слайде в компоненте слайд-шоу? ⇐ CSS

[Anonymous]

Я работаю над компонентом слайд-шоу, в котором мне нужно реализовать круги навигации непосредственно на каждом слайде. В настоящее время у меня есть стрелки навигации (

Код: Выделить всё

prevКнопки 

и «Далее») работают правильно, но я изо всех сил пытаюсь интегрировать круги навигации, соответствующие каждому слайду.
Вот упрощенная версия моей структуры HTML:

Код: Выделить всё

Previous
Next



[img]slide1.jpg[/img]


[img]slide2.jpg[/img]

Требования:

• Каждый слайд должен иметь соответствующий круг навигации, указывающий его положение в слайд-шоу.
  Кружки навигации должны динамически обновляться при переходе по слайдам с помощью кнопок «Предыдущая» и «Далее».

Я пробовал разные подходы, но я не уверен, как легко интегрировать эту функциональность. Мы будем очень признательны за любую информацию или примеры кода!
Вот как это выглядит сейчас:
Вот как это выглядит сейчасВот как это должно выглядеть:
Вот как это должно выглядеть
Я попробовал все, что только мог себе представить, в том числе перемещая контейнер «div» кругов, играя со стилями, но мне ничего не помогло.

Подробнее здесь: https://stackoverflow.com/questions/786 ... -component