Hallo
Ich würde auf meiner Website gerne ein Fenster einbauen, indem Bilder hintereinander Positioniert sind. Dieses Fenster soll vertikal scrollbar sein.
Als Besispiel:
Hallo
Ich würde auf meiner Website gerne ein Fenster einbauen, indem Bilder hintereinander Positioniert sind. Dieses Fenster soll vertikal scrollbar sein.
Als Besispiel:
Und? Wie lautet deine Frage? Was hast du bisher versucht?
Oh, entschuldige bitte. Kann mir jemand sagen, wie ich die scroll funktion einbauen kann?
Also ich habe ein div gemacht, das 90% der Fensterbreite ein nimmt und darin sind die Bilder drin. Die Bilder brechen jetzt jedoch immer um, wenn eine Zeile voll ist. Ich hab schon versucht den Umbruch mit white-space zu verhindern, aber dann wird die Website natürlich um die Breite der Bilder verbreitert, das alle aufeinmal hinterinander passen, was nicht passieren soll. Was muss ich an dem Code ändern?
<div id="wrapvorschaubilder" >
<img src="jplichttechnik.de/IMG/Baby%20Party.jpg" id="Vorschaubilder">
<img src="jplichttechnik.de/IMG/Anfaenger%20Party.jpg" id="Vorschaubilder">
<img src="jplichttechnik.de/IMG/Fortgeschrittene%20Party.jpg" id="Vorschaubilder">
<img src="jplichttechnik.de/IMG/Profi%20Party.jpg" id="Vorschaubilder">
<img src="jplichttechnik.de/IMG/Profi%20Party%20+%20comprimiert.jpg" id="Vorschaubilder">
<img src="jplichttechnik.de/IMG/Legendaere%20Party.jpg" id="Vorschaubilder">
</div>
1. du darfst eine eine ID immer nur genau einmal in deinem Code haben! Nutze eine Klasse 'class="..." ' wenn du eine Mehrfachnutzung brauchst.
2. nutze CSS Felxbox für dein Problem... https://css-tricks.com/snippets/css/a-guide-to-flexbox/
3. schau dir dort mal das Format 'flex-wrap: nowrap;' an
Ich habe mich falsch ausgedrückt, entschuldige bitte. Ich würde gerne die Scroll-Funktion hinkriegen, also das alle Bilder in einer Reihe sind und das ich das dann vertikal durch scrollen kann, aber trotzdem danke, jetzt habe ich zumindest den Umbruch weg
Was verstehst du unter 'Scroll-Funktion'? Du solltest jetzt einen HTML Scrollbar haben unter den Bildern.. hmm... ansonsten setze mal für die ID Vorschaubilder noch 'overflow: hidden;' ins CSS.
Funktioniert leider auch nicht. 'overflow: hidden;' wenn ich overflow: hidden' reinschreibe, verändert das die Größe der Bilder so, dass alles in das div (wrapvorschaubilder) passt. Das sieht jetzt so aus:
html-seminar.de/woltlab/attachment/2339/
Die Bilder währen eigentlich doppelt so groß.
Mit Scroll-Funktion meine ich, dass ich die Bilder durchscrollen kann, wenn nicht alle Bilder in eine Reihe passen. Die Bilder sollen weiterhin in nur einer Reihe sein.
Als Beispiel:
html-seminar.de/woltlab/attachment/2341/ Hier passen nicht alle Bilder ins Bild, aner ich kann nach rechts scrollen, dann sehe ich die restlichen. Sähe dann so aus:
html-seminar.de/woltlab/attachment/2340/
(Ist mit excel gemacht)
Mein CSS Code sieht jetzt folgendermaßen aus:
#wrapvorschaubilder{
border: solid 1px gainsboro;
display: flex;
flex-wrap: nowrap;
}
.Vorschaubilder{
width: 300px;
padding-left: 20px;
overflow: hidden
}
Alles anzeigen
Hast du noch eine Idee, wie ich das hinkriegen kann?
Ich bin zwar nicht Sailor aber ich bin ein wenig verwirrt: Ganz am Anfang hast Du von vertikalem Scrollen geschrieben und auch bei dem Link dort wird vertikal gescrollt. Aber zuletzt geht es um horizontales Scrollen?
Für des horizontale habe ich vor ein paar Tagen für einen anderen Thread so etwas gemacht:
https://webentwicklung.ulrichb…ad363-swipe-images-2.html
Funktioniert auch auf Touch-Geräten durch Wischen.
oh, s***, mir fehlt das Kopftraining, ja es geht um horizontales Scrollen. Entschuldigt bitte das durcheinander Sempervivum könntest du mir den Code zugänglich machen?
Vielleicht so:
Der Code ist jederzeit zugänglich durch Rechtsklick - Seitenquelltext anzeigen o. ä. aber hier ist er nochmal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swipe Demo</title>
<style>
body {
margin: 0;
}
#img-container {
width: 100%;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
#img-container img {
width: calc(100vmin - 20px);
height: calc(100vmin - 20px);
object-fit: contain;
min-height: 1px;
flex: 0 0 100%;
scroll-snap-align: center;
}
</style>
</head>
<body>
<div id="img-container">
<img src="images/bild1.jpg">
<img src="images/bild2.jpg">
<img src="images/bild3.jpg">
<img src="images/bild4.jpg">
<img src="images/bild5.jpg">
<img src="images/buddenbrookhaus_01.jpg">
<img src="images/burgtor_01.jpg">
</div>
</body>
</html>
Alles anzeigen
Super, es klappt. Vielen Dank an dich Sempervivum und an euch andere, die ihr kommentiert habt
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.