Es ist erstaunlich, wie weit HTML und CSS Sie bringen, wenn Sie ein Karussell/eine Diashow erstellen.
- Das Ausrichten einiger Boxen in einer horizontalen Reihe mit CSS Flexbox ist einfach.
- Das Anzeigen von nur einer Box gleichzeitig mit
overflowund der Möglichkeit, sie mitoverscroll-behaviorwischbar zu machen, ist einfach. - Mit
scroll-snap-typekönnen Sie die "Folien" schön ausrichten. - Ein paar
#jump-linksreichen aus, um die Navigation dafür zu erstellen, die Sie mitscroll-behaviorschön und flüssig gestalten können.
Christian Schaefer hat es mit Vor- und Zurück-Buttons sowie einer Auto-Play-Funktion, die stoppt, sobald eine Interaktion beginnt, noch weiter getrieben.
Was das Auto-Play betrifft – es ist ein echter CSS-Trick
- Zuerst verschiebe ich langsam die Scroll-Snap-Punkte nach rechts, wodurch sich der Scrollbereich aufgrund der Ausrichtung an ihnen anpasst.
- Nachdem die Breite einer ganzen Folie gescrollt wurde, deaktiviere ich das Snapping. Der Scrollbereich ist nun von den Scroll-Snap-Punkten getrennt.
- Jetzt lasse ich die Scroll-Snap-Punkte zu ihren ursprünglichen Positionen zurückspringen, ohne dass sie den Scrollbereich zurückziehen.
- Dann aktiviere ich das Snapping erneut, was es dem Scrollbereich ermöglicht, zu einem anderen Snap-Punkt zu springen 🤯
Cool.
JavaScript-gesteuerte Diashows (z. B. mit Flickty) können auch sehr schön sein. Es hat einfach etwas Besonderes, dies mit so wenig Code zu erreichen.
Und wo wir gerade davon sprechen, wie weit wir mit HTML und CSS kommen können, hier sind ein paar verwandte Ansätze für Bildkarussells und Galerien.
- Wie man ein reines CSS-Karussell erstellt (Robin Rendle)
- Wie man eine unendliche Scroll-Bildergalerie mit React und CSS Grid erstellt (DigitalOcean)
- Ein super flexibles CSS-Karussell, erweitert mit JavaScript-Navigation (Maks Akymenko)
- Karussells müssen nicht kompliziert sein (Chris Coyier)
Genau das, was Bulma fehlt!
Hier ist ein lustiger, automatisch abspielender von vor Jahren :) https://codepen.io/dbj/details/XNmvYo
Ich habe es in React ausprobiert und aus irgendeinem Grund funktionieren die Buttons nicht. Weiß jemand warum?
https://codesandbox.io/s/dreamy-currying-mmic6
Ich habe auch bemerkt, dass die Scrollleiste für das erste Beispiel in Firefox (Windows) etwas hässlich aussieht und das zweite Beispiel beim Klicken auf die großen Schaltflächen in Firefox (Windows) nicht funktioniert.
Gibt es eine moderne Methode, wie Leute den "Anker-Sprung" verhindern – zum Beispiel, ich benutze das in der Mitte einer Seite und möchte nicht, dass das Schieberegler jedes Mal zum Anfang springt, wenn ein Benutzer auf die Foliennavigation klickt (mit Ihrer ersten Methode)?
Dasselbe hier. Es macht mir nichts aus, zu einem ID-Punkt auf der Seite zu springen, aber meine Anwendung erfordert, dass ein Text über dem Karussell sichtbar bleibt. Weiterhin möchte ich anstelle der Punkte unten Text-Schaltflächen (CSS) OBEN auf dem Karussell platzieren. Ich kann sie durch Ändern der "bottom"-Spezifikation in eine negative "top"-Zahl an diese Position bringen, aber das Klicken auf eine Karussellseite scrollt sie zum oberen Rand des Fensters, wodurch alles darüber verschwindet.
Als Antwort auf die Fragen anderer: Die Neupositionierung erfolgt, weil der Code die Frames durch einen
<a>-Sprung zu einem anderen angegebenen Anker ändert. Der Sprung bewegt die Ansicht jedoch nicht nur seitwärts, sondern auch zum oberen Rand des Browserfensters. Soweit ich weiß, gibt es keine Möglichkeit, nur seitwärts zu springen.Derzeit spiele ich mit verschiedenen Positionseinstellungen, aber die Aussichten scheinen nicht gut zu sein, und ich betrachte negative Positionierung immer als eine Notlösung.
2,5 Jahre zu spät zur Party, aber ich habe eine Lösung auf dieser Seite gefunden.
https://markus.oberlehner.net/blog/super-simple-progressively-enhanced-carousel-with-css-scroll-snap/
Der Autor verwendet einen JS-Event-Listener, um das Springen zu verhindern. Hat bei mir wie ein Zauber funktioniert.
Hallo! Ich versuche, das von Ihnen gepostete reine CSS-Karussell zu verwenden, und ich kann nicht herausfinden, wie ich die Zahl, die darüber liegt, wie "1", "2" usw., entfernen kann. Wie kann ich die loswerden? Ich lege Bilder im Hintergrund des Karussells ein, und die Zahlen sehen darauf schlecht aus.
Hallo Katie,
Ich hatte das auch und es lag daran, dass ich diesen Abschnitt, der den Listenstil entfernt, nicht eingefügt hatte –
Es ist ein Zähler, der inkrementiert und durch einen Inhaltswert eingefügt wird. Ich denke, Sie können ihn einfach loswerden, indem Sie den Wert durch einen leeren String ersetzen. Aber wenn Sie den Zähler nicht benötigen, ist es vielleicht besser, den Code, der ihn definiert, sowie diese Inhaltszeile wegzulassen.
Unten habe ich das Original auskommentiert und ersetzt
.carousel__slide:before {
/* content: counter(item); */
content: “” ;
Hallo, ich bin neugierig, wie man die Schaltflächen aktiv macht, je nachdem, welche man gedrückt hat oder zu welchem Bildschirm man gewischt hat?
Ich möchte eine Version davon anpassen, um einen Überschriften-Karussell auf meiner Website unter https://www.stevesims.com hinzuzufügen. Darf ich fragen, wie Sie die Navigationspfeile ausblenden?
Die seitlichen Schaltflächen sind in diesem Teil des CSS-Codes definiert. Wenn Sie diese Stile löschen, verschwinden sie. Ich habe nicht getestet, ob dieser Bereich noch "hot" ist. Ich selbst möchte die Vorher/Nächste-Schaltflächen, aber sie sollten außerhalb des Folienbereichs platziert oder transparent gemacht werden (je nach Platzierung des Karussells auf der gesamten Seite), damit sie den Inhalt nicht verdecken, der Text oder ein wichtiges Bilddetail sein könnte.
.carousel::before,
.carousel::after {
content: ”;
z-index: 1;
background-color: #333;
background-size: 1.5rem 1.5rem;
background-repeat: no-repeat;
background-position: center center;
farbe: #fff;
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
pointer-events: none;
}
Hallo, ich habe die reine CSS-Version verwendet und alles ist in Ordnung, außer wenn ich das Karussell auf einem CSS-Grid platziere. Jedes Mal, wenn ich auf eine beliebige Steuertaste klicke, fokussiert sich die Seite auf das Karussell (scrollt die Seite nach unten und blendet das obere Menü aus). Wie kann ich diesen Fokus verhindern?
Es gibt einen Fehler in Christian Schaephers Karussell – wenn man zur letzten Bild in dem Karussell wechselt und dann zurück zum ersten, funktioniert der "Weiter"-Button nicht. Irgendwelche Ideen, wie man das verhindern kann?
Ich habe die beiden reinen CSS-Karussells ausprobiert. Jedes Mal, wenn ein #jump-link gedrückt wird, springt die Box zusätzlich zum beabsichtigten Zweck auch an den Anfang der Seite. Ich bin mir nicht sicher, was dieses Verhalten verursacht. Bitte helfen Sie mir, dies zu verhindern. Link zur Referenz
https://www.hotlink.com/page/SIY00WE7CKD6/INOYHMTDX1IM
Außerdem funktioniert im Auto-Slide der Weiter-Button am Anfang nicht, bis ein anderer Button verwendet wird.
Hallo, weißt du, wann ich die Nummer pro Bild ändern kann?
Hallo
Ich habe eine Frage: Wie kann ich die Zahlen durch verschiedene Bilder für jede der Folien ersetzen?
Ich habe festgestellt, dass dieser Code keine Links innerhalb der Folien zulässt. Gibt es eine Möglichkeit, dies zu lösen?
Ich mag, dass Christian Schaephers rein CSS-basiert ist, und ich möchte die seitlichen Scroll-Buttons. Und das automatische Scrollen ist interessant, da es in einigen Situationen den Benutzer darauf hinweisen kann, dass eine Änderung möglich ist. Aber das ist von den seitlichen Buttons und wenn die unteren Buttons zu Text-Buttons oben gemacht werden, ziemlich offensichtlich. (Siehe einen meiner anderen Kommentare dazu.)
Aber zwei Probleme: 1. Es demonstriert nicht wirklich die Bandbreite des Inhalts, da es nur die erste Folie wieder an ihren Platz schiebt. 2. Autoscroll pausiert nur bei Klick oder Hover. Wenn der Benutzer den Cursor wegbewegt, wird er fortgesetzt, und das ist WIRKLICH ärgerlich.
Wie können wir das Autoscrolling also ganz weglassen? Ich befürchte, ich verstehe die Erklärung nicht genug, um sie anders als durch Versuch und Irrtum zu überarbeiten.