Positionierung von Pfeilen in Flexboxen?

Hallo,

ich wollte bei meiner Website eine kleine Slideshow einbauen. Dazu habe ich erst einmal Pfeile erstellt. Diese wollte ich nun richtig positionieren. Ich hatte die Idee, eine Flexbox um die Bilder mit den Pfeilen zu erstellen und die Pfeile dann einfach mit align-items zu positionieren. Irgendetwas habe ich allerdings falsch gemacht. Vielleicht fällt euch ja mein Fehler auf. Bin für jeden Tipp dankbar.

html:

<div class="slide">
            <div id="footer2">
                <div id="bilder">
                    <div id="flexbox">
                        <div class="post">
                            <img src="wohnzimmer.png" alt="Wohnzimmer">
                            <div class="post-s">
                                <h2>Einbaumöbel</h2>
                            </div>
                        </div>
                        <div class="post1">
                            <img src="badezimmer.png" alt="Badezimmer">
                            <div class="post1-s">
                                <h2>Badmöbel</h2>
                            </div>
                        </div>
                        <div class="post2">    
                            <img src="einbauschränke.png" alt="Einbauschränke">
                            <div class="post2-s">
                                <h2>Einbauschränke</h2>
                            </div>
                        </div>
                    </div>
                    <div class="post3">
                        <img src="hochbett.png" alt="Hochbett">
                        <div class="post3-s">
                            <h2>Kinderhochbetten in Eichemassivholz</h2>
                        </div>
                    </div>
    
                    </div> 
                    
                </div>
                <a class="pfeil pfeil-links"><span>&#10094;</span></a>
                <a class="pfeil pfeil-rechts"><span>&#10095;</span></a>
            </div> 
        </div>

Css:

.slide{
    display: flex;
    border: solid black;
}
.pfeil {
    position: absolute;
    top: 0px;
    bottom: 0px;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
    
}
.pfeil-links {
    left: 0;
}
.pfeil-rechts {
    right: 0;
}

Bild zum Beitrag
Computer, HTML, programmieren, CSS, Programmiersprache, Webdesign
Weitere Inhalte können nur Nutzer sehen, die bei uns eingeloggt sind.