Стрелки на навигации по центру ползунга в соответствии с изображением, а не родительским контейнером ⇐ CSS

[Anonymous]

Как я могу центрировать кнопки навигации слайдера на основе изображений внутри каждого слайда вместо родительского контейнера? У меня есть секция слайдера, отображающая продукты с именами и ценами. Кнопки Prev/Next в настоящее время центрируются по вертикали по сравнению с родительским контейнером, но мне нужно, чтобы они соответствовали изображениям внутри каждой .slider-item. Я не могу обернуть изображения в отдельный Div только для центрирования, так как это сломало бы функциональность слайдера. Я придумывал использование JS для центрирования, но мне не нравится идея использования чего -либо, кроме HTML и CSS/SCSS. Br />

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

    .slider-controls {
position: absolute;
top: 50%;
left:50%;
width: 90%;
display: flex;
justify-content: space-between;
transform: translate(-50%, -50%);
}

Какой подход лучше всего достичь? .net/vmmglio7.png "/>
Quick Demo здесь
https://codepen.io/in2d/pen/ypkmjge
Как должны быть стрелки навигации
< /p>
Ура! < /p>

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