Slider -Navigationspfeile nach dem Bild nicht übergeordneter Container ⇐ CSS

[Guest]

Wie kann ich die Schaltflächenschaltflächen auf der Basis der Bilder in jeder Folie anstelle des übergeordneten Containers zentrieren? Ich habe einen Schieberegler, in dem Produkte mit Namen und Preisen angezeigt werden. Die vorherigen/nächsten Schaltflächen sind derzeit vertikal relativ zum übergeordneten Container zentriert, aber ich muss sie mit den Bildern in jedem .Slider-Item ausrichten. Ich kann die Bilder nicht nur zum Zentrieren in ein separates Div einwickeln, da dies die Slider -Funktionalität brechen würde. Ich habe mit JS zum Zentrieren konventioniert, aber ich mag die Idee, etwas anderes als HTML und CSS/SCSS zu verwenden. Br />

Code: Select all

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

Was ist der beste Ansatz, um dies zu erreichen? .net/vmmglio7.png "/>
Schnelle Demo hier
https://codepen.io/in2d/pen/ypkmjge
Wie die Navigationspfeile
< /p>
Prost! < /p>