Настройка стиля и положения кругов ползунков-индикаторов в разделе Shopify (Жидкость) ⇐ CSS

[Anonymous]

Я работаю над веб-сайтом Shopify, и у меня возникли проблемы со стилем и расположением кругов индикатора слайда, которые показывают, на каком слайде находится пользователь. Ниже приведен соответствующий код Liquid и CSS для элементов управления ползунком:
Код Liquid:

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

{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}

{% render 'icon-caret' %}



{%- for block in section.blocks -%}



{%- endfor -%}


{%- endif -%}

CSS-код:

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

.slider-counter--circles {
background-color: none;
}

.slider-counter--circles .slideshow__control-wrapper {
display: flex;
justify-content: center;
gap: 10px;
}

.slider-counter__link--circle {
background: none;
border: none;
padding: 0;
cursor: pointer;
}

.slider-counter__link--circle .circle {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid #000;
border-radius: 50%;
background-color: transparent;
transition: background-color 0.3s, border-color 0.3s;
}

.slider-counter__link--circle.active .circle {
background-color: #000;
border-color: #000;
}

Текущая проблема:
Кружки индикатора слайда не оформлены и не расположены должным образом.
Как это выглядит сейчас:


Как это должно выглядеть:
[img]https://i. sstatic.net/pBcMT5Uf.png[/img]

Вопрос:
Как я могу настроить код CSS или Liquid добиться желаемого стиля и положения кругов индикатора слайда? Будем очень признательны за любые предложения или рекомендации.

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