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
Was ist hier genau das Problem (Programmieren = p5.js)?

Ich habe ein Problem mit dem programmieren, da angeblich p5js sagt: There's an error due to \"keyIsDown\" not being defined in the current scope (on line 36 in jspg?

Ich habe mal meinen Code hineinkopiert und hoffe, dass jemand hier mir helfen kann. (Ist ein Projekt für die Schule).

Ich würde gerne das Programm, wie es hier steht, ohne Probleme es zum laufen zu bringen.

let v;

let b;

let n;

let m;

let vGeschwindigkeit;

let bGeschwindigkeit;

let nGeschwindigkeit;

let mGeschwindigkeit;

function setup() {

createCanvas(310, 400);

background('lightgray');

v = -200;

b = -200;

n = -200;

m = -200;

vGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

bGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

nGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

mGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

}

function draw() {

background(240); // Löscht Bild

rect(10, v, 65, 100);

fill('black');

rect(85, b, 65, 100);

fill('black');

rect(160, n, 65, 100);

fill('black');

rect(235, m, 65, 100);

fill('white');

circle(mouseX, mouseY, 10); // Mauszeigerkreis

fill('black');

}

if (keyIsDown(82)) { //taste r -> Spiel neu

setup();

}

if (mouseIsPressed) {

  rgbFarbwerte = get(mouseX, mouseY);

  if (rgbFarbwerte[0] > 0) {

  v = -200;

  b = -200;

  n = -200;

  m = -200; //Falls man den Hintergrund drückt, dann soll das Spiel nochmal von Anfang an wieder starten.

  }

}

if (mouseIsPressed) {

if (10 < mouseX && mouseX < 75 &&

v < mouseY && mouseY < v + 100) {

v = -200; //Taste 1 geht in die Ausgangslage

vGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (85 < mouseX && mouseX < 150 &&

b < mouseY && mouseY < b + 100) {

b = -200; //Taste 2 geht in die Ausgangslage

bGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (160 < mouseX && mouseX < 225 &&

n < mouseY && mouseY < n + 100) {

n = -200; //Taste 1 geht in die Ausgangslage

nGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (235 < mouseX && mouseX < 310 &&

m < mouseY && mouseY < m + 100) {

m = -200; //Taste 1 geht in die Ausgangslage

nGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

v = v + vGeschwindigkeit;

if (v > height) {

v = -100;

vGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 1

}

b = b + bGeschwindigkeit;

if (b > height) {

b = -100;

bGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 2

}

n = n + nGeschwindigkeit;

if (n > height) {

n = -100;

nGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 3

}

m = m + mGeschwindigkeit;

if (m > height) {

m = -100;

mGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 4

}

PC, Computer, programmieren, JavaScript, Informatik, Programmiersprache

Meistgelesene Beiträge zum Thema Programmiersprache