Pfeil zum horizontalen Bilderscrollen - HTML 5 und CSS3?

Hallo, wie kriegt man das in einer Bildergalerie hin, dass jeweils rechts vom Foto ein Pfeil zum horizontalen Weiterscrollen ist? Vielen Dank für einen Tipp!

2 Antworten

flyaquarius

06.05.2023, 14:41

Den Pfeil selbst mit HTML und CSS, dass er etwas bewirkt mit Javascript. Da ich sowas in meinem Projekt schon gemacht habe, kann ich meinen Code mit dir teilen, das hilft vielleicht:

.carousel-button {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  top: calc(50% - 24px);
}

#carousel-left-button {
  left: 8px;
}

#carousel-right-button {
  right: 8px;
}

Um mit Javascript zu scrollen, holst du dir das Element, dass als Container dient und benutzt die scrollBy- oder die scrollTo-Methode.

Element: scrollBy() method - Web APIs | MDN (mozilla.org)

Element: scrollTo() method - Web APIs | MDN (mozilla.org)

Millie2393

Fragesteller

07.05.2023, 00:18

Vielen Dank für die Mühe und die ausführliche Erläuterung, finde ich sehr nett und hilfsbereit!

Bernhard35

06.05.2023, 14:04

durch programmieren mit JavaScript

Ähnliche Fragen

HTML - Wie Smiley um 90° drehen?

Auf meiner Homepage benütze ich Pfeil-Smileys (siehe Foto).

Leider aber gibt es diese Smileys nur als Pfeil entweder nach oben ▲ oder nach unten ▼.

Ich bräuchte aber auch analoge Pfeile nach links und rechts.

Wie kann ich die Pfeile per HTML drehen? Leider verstehe ich nur HTML.

...zur Frage

HTML Text verschieben?

Ich möchte den text horizontal mittig haben justify-content und align-items gehen beide nicht


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .WelcomeTitle {
           display: flex;
           flex-direction: column;
          
            text-align: center;
            align-items: center;
            font-family: sans-serif;
        }
    </style>
    <h1 class="WelcomeTitle">Hier kommt ein Titel
        <br>
        hin der Lang ist!</h1>
</body>
</html>

...zur Frage

HTML und CSS3 üben?

Hi Leute,

ich versuche mich mal ein wenig als Programmierer in HTML5 und CSS3 und habe festgestellt, dass mein Wissen/Praktikum in diesem Bereich etwas begrenzt ist. Was ich bräuchte, evntl ein gutes Buch mit Übungen/kleinen Projekten zum üben.

Ich hab schon das Buch von Paul Fuchs “HTML und CSS3” durchgearbeitet, da gibt es viel Info und etwas Praktikum, aber ich will noch mehr, damit ich dann mit dem richtigen Projekt starten kann. Kann mit jemand was dazu empfehlen?

P.S. Anbei füge ich ein Foto von dem Buch, womit ich angefangen habe. Evntl hatte jemand von euch es auch.

...zur Frage

HTML - Button zum Variieren der Schriftgröße auf meiner Homepage?

Kann mir bitte jemand für HTML einen Tipp geben oder mir eine Internetseite benennen, wie ich auf meine Homepage einen Button kriege, damit ein Leser die Schrift vergrößern oder verkleinern kann?

So wie auf dem Foto im ePaper der FAZ.

...zur Frage

Richtiges verhalten im Straßenverkehr, grüner leuchtender Pfeil, Hilfe bitte?

Hallo alle miteinander. Ich habe morgen Praktische Fahrprüfung und ich hoffe einer von euch kann mir helfen. Ich versuche es jetzt so gut wie möglich zu beschreiben. Bei einer Fahrbahn wo es links und recht jeweils 2 Fahrbahnen gibt, kommt eine Ampel die rot zeigt. Ich will nach links abbiegen, somit muss ich über die beiden Fahrbahnen der entgegenkommenden Fahrzeuge fahren. Hinter der Straße wo ich einbiegen will steht ein grüner,leuchtender Pfeil ( es gibt keine andere Straße wofür der Pfeil gelten könnte), der Pfeil deutet in die Straße hinein und welchen du von der Ampel aus perfekt siehst. Muss ich da trotzdem an der Ampel halten und warten, bis sie grün wird und biege dann ab oder darf ich mich nach dem grün, leuchtenden Pfeil richten und sofort abbiegen, wenn die Farhbahn frei ist?

...zur Frage

Wie kriegt man sowelche Sprechblasen hin?

wie kann man sowas erstellen und in ein foto hinzufügen

...zur Frage

Wie programmiere ich einen "Nach oben-Button" mit HTML?

Hallo, Ich bin dabei eine Website für die Schule zu programmieren und bin noch nicht so Erfahren mit HTML, daher meine Frage: Wie programmiere ich so einen runden Button mit Pfeil nach oben, der rechts unten erscheint, wenn ich ein bisschen runtergescrollt habe und wenn ich drauf klicke mich automatisch wieder nach oben scrollt?

...zur Frage

Sobald <a> tag hinzugefügt wird verkleinert sich der Registrieren Button?

Hey also jeweils die ersten beiden Bilder zeigen wie ich es haben möchte und die letzten beiden was passiert sobald ich dies umsetze. Es klappt nicht dass der Registrieren Button auf normaler größe bleibt, sobald ich die angehängte HTML Datei in den Code tippe, schrumpft der Button. Hat irgendwer eine erklärung und ggf auch lösung.

Edit: liegt wohl nicht am A tag

...zur Frage

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;
}

...zur Frage

Günstigsten Preis in einer Excel Tabelle anzeigen lassen?

Hey Leute,

Ich möchte dass in der Zeile B9, B1 und B11 jeweils der günstigste Preis steht.

Also Es soll in der Matrix A1:D4 nach den Produktnamen Apfel A9 gesucht werden und dann in der selben Spalte nach rechts der günstigste Preis gesucht und angezeigt werden.

Siehe Foto

Vielen Dank!

...zur Frage

Kopfzeile macht Probleme wegen zu kurzem Tabulator-Pfeil?

In jeder Kopfzeile habe ich auf der linken Seite jeweils die Überschrift. Die Seitenzahl kommt direkt danach und soll jeweils ganz nach rechtsaußen gerückt werden. Dies mache ich mit der Tabulator-Taste. Nun habe ich aber eine Kopfzeile, wo der Tabulator-Pfeil die Seitenzahl nur ein einziges Leerzeichen weit nach rechts rückt. In den anderen Kopfzeilen ist der Tabulator-Pfeil aber so lang, dass da die jeweiligen Seitenzahlen ganz nach rechtsaußen rücken.

Wie kann ich also verhindern, dass der Tabulator-Pfeil nur so kurz ist? (Word 2016)

...zur Frage

HTML Bild in Hintergrund "faden" lassen.?

Wie schaffe ich es, dass ein bild zum Beispiel nach rechts hin immer durchsichtiger wird?

...zur Frage

Wie würdet ihr es in HTML schreiben und später mit CSS stylen?

Hallo Leute.

Ich wollte den Header mit einem Bild in der Mitte zentriert und zwei Links, jeweils links und rechts darstellen.

Die Darstellung die ich wollte, habe ich hinbekommen.

(Es geht nur um die Positionierung der Elemente, und nicht um Farben, oder ob man die Links nicht im Header, sondern wo Anders positionieren sollte. Es geht explizit um diese Darstellung im Header-Breich.)

Bild 1(Browser): >>>>>>>>>>

Bild 2(HTML): >>>>>>>>>>

Bild 3(CSS): >>>>>>>>>>

Meine Frage wäre: Wie würdet ihr denn die HTML schreiben und anschließend mit CSS stylen, um so ein Ergebnis zu erreichen.

Ich bin mir ziemlich sicher, dass meine Variante nicht die übliche Variante ist, die ein erfahrener in diesem Bereich bevorzugen würde.

Danke.

...zur Frage

Wie bekomme ich dieses Design hin?

Hey,
ich bin langsam am verzweifeln...
Ich frage mich die ganze Zeit wie ich das in CSS mithilfe von HTML und JS hinbekomme. (siehe Bild) Ich will das wenn man auf "Fach hinzufügen" klickt(grün), eine horizontale Linie entsteht und wenn man auf "Kategorie hinzufügen" klickt, eine vertikale linie. Auf die dabei entstehenden Felder sollte ich auch zugriff haben. Außerdem sollte es auch dynamisch sein. Wie bekomme ich das hin ?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen