Erstellen Sie einen benutzerdefinierten Ganzseiten-Slider mit CSS und JavaScript

Ich arbeite viel mit benutzerdefinierten Vollbild-Layouts, praktisch täglich. Normalerweise implizieren diese Layouts eine beträchtliche Menge an Interaktion und Animation. Ganz gleich, ob es sich um eine zeitgesteuerte komplexe Zeitachse mit Übergängen oder um eine scrollbasierte, benutzergesteuerte Reihe von Ereignissen handelt, in den meisten Fällen erfordert die Benutzeroberfläche mehr als nur die Verwendung einer sofort einsatzbereiten Plugin-Lösung mit ein paar Optimierungen und Änderungen . Auf der anderen Seite sehe ich, dass viele JavaScript-Entwickler dazu neigen, nach ihrem bevorzugten JS-Plugin zu greifen, um ihre Arbeit zu erleichtern, auch wenn die Aufgabe möglicherweise nicht den ganzen Schnickschnack eines bestimmten Plugins erfordert.

Haftungsausschluss: Die Verwendung eines der vielen verfügbaren Plugins hat natürlich seine Vorteile. Sie erhalten eine Vielzahl von Optionen, die Sie verwenden können, um sie an Ihre Bedürfnisse anzupassen, ohne viel programmieren zu müssen. Außerdem optimieren die meisten Plugin-Autoren ihren Code, machen ihn browser- und plattformübergreifend kompatibel und so weiter. Trotzdem erhalten Sie in Ihrem Projekt eine Bibliothek in voller Größe für vielleicht nur ein oder zwei verschiedene Dinge, die es bietet. Ich sage nicht, dass die Verwendung eines Plugins von Drittanbietern natürlich eine schlechte Sache ist, ich mache es täglich in meinen Projekten, nur dass es im Allgemeinen eine gute Idee ist, die Vor- und Nachteile jedes Ansatzes so abzuwägen, wie er ist eine gute Praxis in der Codierung. Wenn es darum geht, auf diese Weise Ihr eigenes Ding zu machen, erfordert es etwas mehr Programmierkenntnisse und Erfahrung, um zu wissen, wonach Sie suchen, aber am Ende sollten Sie einen Code erhalten, der eine Sache und nur eine Sache so macht du willst es.

Dieser Artikel soll einen reinen CSS/JS-Ansatz bei der Entwicklung eines durch Scrollen ausgelösten Vollbild-Slider-Layouts mit benutzerdefinierter Inhaltsanimation zeigen. In diesem herunterskalierten Ansatz werde ich die grundlegende HTML-Struktur behandeln, die Sie von einem CMS-Back-End erwarten würden, moderne CSS-Layouttechniken (SCSS) und einfache JavaScript-Codierung für vollständige Interaktivität. Da es sich um Barebones handelt, kann dieses Konzept leicht auf ein größeres Plugin erweitert und/oder in einer Vielzahl von Anwendungen verwendet werden, die im Kern keine Abhängigkeiten haben.

Das Design, das wir erstellen werden, ist eine minimalistische Architektur-Portfolio-Vitrine mit vorgestellten Bildern und Titeln jedes Projekts. Der vollständige Schieberegler mit Animationen sieht folgendermaßen aus:

Sie können sich die Demo hier ansehen und für weitere Details auf mein Github-Repo zugreifen.

HTML-Übersicht

Hier ist also das grundlegende HTML, mit dem wir arbeiten werden:

 <div> <div class="mask"> <!-- Textual logo will go here --> </div> <div> <div class="slides"> <!-- Featured image slides will go here --> </div> <div class="slides mask"> <!-- Slide titles will go here --> </div> </div> <div> <!-- Static info on the right --> </div> <nav> <!-- Current slide indicator --> </nav> </div>

Ein div mit der ID hero-slider ist unser Haupthalter. Im Inneren ist das Layout in Abschnitte unterteilt:

• Logo (ein statischer Abschnitt)
• Diashow, an der wir hauptsächlich arbeiten werden
• Info (ein statischer Abschnitt)
• Slider-Navigation, die die derzeit aktive Folie sowie die Gesamtzahl der Folien anzeigt

Konzentrieren wir uns auf den Diashow-Bereich, da dies unser Interessepunkt in diesem Artikel ist. Hier haben wir zwei Teile – main und aux . Main ist das div, das ausgewählte Bilder enthält, während aux Bildtitel enthält. Die Struktur jeder Folie innerhalb dieser beiden Halter ist ziemlich einfach. Hier haben wir eine Bildfolie im Inneren des Haupthalters:

 <div class="slide" data-index="0"> <div class="abs-mask"> <div class="slide-image"> </div> </div> </div>

Das Indexdatenattribut wird verwendet, um zu verfolgen, wo wir uns in der Diashow befinden. Das abs-mask div verwenden wir, um einen interessanten Übergangseffekt zu erzeugen, und das slide-image div enthält das spezifische vorgestellte Bild. Bilder werden inline gerendert, als kämen sie direkt aus einem CMS und werden vom Endbenutzer festgelegt.

In ähnlicher Weise gleitet der Titel in den Aux-Halter:

 <h2 class="slide-title slide" data-index="0"><a href="#">#64 Paradigm</a></h2>

Jeder Folientitel ist ein H2-Tag mit dem entsprechenden Datenattribut und einem Link, um auf die Einzelseite dieses Projekts führen zu können.

Der Rest unseres HTML ist ebenfalls ziemlich einfach. Wir haben oben ein Logo, statische Informationen, die dem Benutzer mitteilen, auf welcher Seite er sich befindet, eine Beschreibung und einen aktuellen/gesamten Schieberegler.

CSS-Übersicht

Der CSS-Quellcode wird in SCSS geschrieben, einem CSS-Präprozessor, der dann in reguläres CSS kompiliert wird, das der Browser interpretieren kann. SCSS bietet Ihnen den Vorteil, Variablen, verschachtelte Auswahl, Mixins und andere coole Dinge zu verwenden, aber es muss in CSS kompiliert werden, damit der Browser den Code so liest, wie er sollte. Für die Zwecke dieses Tutorials habe ich Scout-App verwendet, um das Kompilieren zu handhaben, da ich die Werkzeuge auf das absolute Minimum beschränken wollte.

Ich habe Flexbox verwendet, um das grundlegende Side-by-Side-Layout zu handhaben. Die Idee ist, die Diashow auf der einen Seite und den Infobereich auf der anderen Seite zu haben.

 #hero-slider { position: relative; height: 100vh; display: flex; background: $dark-color; } #slideshow { position: relative; flex: 1 1 $main-width; display: flex; align-items: flex-end; padding: $offset; } #info { position: relative; flex: 1 1 $side-width; padding: $offset; background-color: #fff; }

Lassen Sie uns in die Positionierung eintauchen und konzentrieren Sie sich erneut auf den Diashow-Bereich:

 #slideshow { position: relative; flex: 1 1 $main-width; display: flex; align-items: flex-end; padding: $offset; } #slides-main { @extend %abs; &:after { content: ''; @extend %abs; background-color: rgba(0, 0, 0, .25); z-index: 100; } .slide-image { @extend %abs; background-position: center; background-size: cover; z-index: -1; } } #slides-aux { position: relative; top: 1.25rem; width: 100%; .slide-title { position: absolute; z-index: 300; font-size: 4vw; font-weight: 700; line-height: 1.3; @include outlined(#fff); } }

Ich habe den Hauptregler so eingestellt, dass er absolut positioniert ist und die Hintergrundbilder den gesamten Bereich strecken, indem ich die Eigenschaft background-size: cover verwende. Um mehr Kontrast zu den Folientiteln zu schaffen, habe ich ein absolutes Pseudo-Element gesetzt, das als Overlay fungiert. Der Aux-Schieberegler mit den Folientiteln befindet sich am unteren Rand des Bildschirms und über den Bildern.

Da jeweils nur eine Folie sichtbar ist, setze ich auch jeden Titel auf absolut und lasse die Haltergröße über JS berechnen, um sicherzustellen, dass es keine Abschneidungen gibt, aber dazu mehr in einem unserer nächsten Abschnitte. Hier sehen Sie die Verwendung einer SCSS-Funktion namens Erweitern:

 %abs { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

Da ich häufig absolute Positionierung verwendet habe, habe ich dieses CSS in eine erweiterbare Datei gezogen, damit es in verschiedenen Selektoren leicht verfügbar ist. Außerdem habe ich ein Mixin namens „outlined“ erstellt, um beim Stylen der Titel und des Haupt-Slider-Titels einen DRY-Ansatz zu bieten.

 @mixin outlined($color: $dark-color, $size: 1px) { color: transparent; -webkit-text-stroke: $size $color; }

Der statische Teil dieses Layouts hat nichts Komplexes, aber hier sehen Sie eine interessante Methode zum Positionieren von Text, der sich auf der Y-Achse befinden muss, anstatt in seinem normalen Fluss:

 .slider-title-wrapper { position: absolute; top: $offset; left: calc(100% - #{$offset}); transform-origin: 0% 0%; transform: rotate(90deg); @include outlined; }

Ich möchte Ihre Aufmerksamkeit auf die transform-origin Eigenschaft lenken, da ich fand, dass sie für diese Art von Layout wirklich zu wenig genutzt wird. Dieses Element wird so positioniert, dass sein Anker in der oberen linken Ecke des Elements verbleibt, den Rotationspunkt festlegt und der Text kontinuierlich von diesem Punkt nach unten fließt, ohne Probleme, wenn es um unterschiedliche Bildschirmgrößen geht.

Werfen wir einen Blick auf einen interessanteren CSS-Teil - die anfängliche Ladeanimation:

Normalerweise wird diese Art von synchronisiertem Animationsverhalten mithilfe einer Bibliothek erreicht – GSAP zum Beispiel ist eine der besten auf dem Markt, bietet hervorragende Rendering-Funktionen, ist einfach zu verwenden und verfügt über die Timeline-Funktionalität, die es dem Entwickler ermöglicht, Elemente programmgesteuert zu verketten geht ineinander über.

Da dies jedoch ein reines CSS/JS-Beispiel ist, habe ich mich entschieden, hier wirklich einfach zu werden. Daher wird jedes Element standardmäßig auf seine Startposition gesetzt – entweder durch Transformation oder Opazität ausgeblendet und beim Laden des Schiebereglers angezeigt, der von unserem JS ausgelöst wird. Alle Übergangseigenschaften werden manuell angepasst, um einen natürlichen und interessanten Fluss zu gewährleisten, wobei jeder Übergang in einen anderen übergeht und ein angenehmes visuelles Erlebnis bietet.

 #logo:after { transform: scaleY(0); transform-origin: 50% 0; transition: transform .35s $easing; } .logo-text { display: block; transform: translate3d(120%, 0, 0); opacity: 0; transition: transform .8s .2s, opacity .5s .2s; } .current, .sep:before { opacity: 0; transition: opacity .4s 1.3s; } #info { transform: translate3d(100%, 0, 0); transition: transform 1s $easing .6s; } .line { transform-origin: 0% 0; transform: scaleX(0); transition: transform .7s $easing 1s; } .slider-title { overflow: hidden; >span { display: block; transform: translate3d(0, -100%, 0); transition: transform .5s 1.5s; } }

Wenn es eine Sache gibt, die Sie hier sehen möchten, dann ist es die Verwendung der transform -Eigenschaft. Beim Verschieben eines HTML-Elements, sei es ein Übergang oder eine Animation, wird empfohlen, die transform -Eigenschaft zu verwenden. Ich sehe viele Leute, die dazu neigen, entweder den Rand oder die Polsterung oder sogar die Versätze – oben, links usw. – zu verwenden, was beim Rendern keine angemessenen Ergebnisse liefert.

Um einen tieferen Einblick in die Verwendung von CSS beim Hinzufügen von interaktivem Verhalten zu erhalten, kann ich den folgenden Artikel nicht genug empfehlen.

Es ist von Paul Lewis, einem Chrome-Ingenieur, und deckt so ziemlich alles ab, was man über Pixel-Rendering im Web wissen sollte, sei es CSS oder JS.

JavaScript-Übersicht und Slider-Logik

Die JavaScript-Datei ist in zwei unterschiedliche Funktionen unterteilt.

Die heroSlider Funktion, die sich um alle hier benötigten Funktionen kümmert, und die utils Funktion, bei der ich mehrere wiederverwendbare Hilfsfunktionen hinzugefügt habe. Ich habe jede dieser Hilfsfunktionen kommentiert, um den Kontext bereitzustellen, wenn Sie sie in Ihrem Projekt wiederverwenden möchten.

Die Hauptfunktion ist so codiert, dass sie zwei Zweige hat: init und resize . Diese Verzweigungen sind über die Rückkehr der Hauptfunktion verfügbar und werden bei Bedarf aufgerufen. init ist die Initialisierung der Hauptfunktion und wird beim Laden des Fensters ausgelöst. In ähnlicher Weise wird der Größenänderungszweig bei der Größenänderung des Fensters ausgelöst. Der einzige Zweck der Größenänderungsfunktion besteht darin, die Schiebereglergröße des Titels bei der Größenänderung des Fensters neu zu berechnen, da die Schriftgröße des Titels variieren kann.

In der heroSlider Funktion habe ich ein Slider-Objekt bereitgestellt, das alle Daten und Selektoren enthält, die wir benötigen werden:

 const slider = { hero: document.querySelector('#hero-slider'), main: document.querySelector('#slides-main'), aux: document.querySelector('#slides-aux'), current: document.querySelector('#slider-nav .current'), handle: null, idle: true, activeIndex: -1, interval: 3500 };

Als Nebenbemerkung könnte dieser Ansatz leicht angepasst werden, wenn Sie beispielsweise React verwenden, da Sie die Daten im Status speichern oder die neu hinzugefügten Hooks verwenden können. Um auf dem Punkt zu bleiben, lassen Sie uns einfach durchgehen, was jedes der Schlüssel-Wert-Paare hier darstellt:

• Die ersten vier Eigenschaften sind eine HTML-Referenz auf das DOM-Element, das wir manipulieren werden.
• Die handle Eigenschaft wird verwendet, um die Autoplay-Funktionalität zu starten und zu stoppen.
• Die idle ist ein Flag, das den Benutzer daran hindert, das Scrollen zu erzwingen, während sich die Folie im Übergang befindet.
• activeIndex ermöglicht es uns, die derzeit aktive Folie zu verfolgen
• interval bezeichnet das Autoplay-Intervall des Schiebereglers

Bei der Slider-Initialisierung rufen wir zwei Funktionen auf:

 setHeight(slider.aux, slider.aux.querySelectorAll('.slide-title')); loadingAnimation();

Die setHeight Funktion greift auf eine Hilfsfunktion zu, um die Höhe unseres Aux-Schiebereglers basierend auf der maximalen Titelgröße festzulegen. Auf diese Weise stellen wir sicher, dass eine angemessene Größe bereitgestellt wird und kein Folientitel abgeschnitten wird, selbst wenn sein Inhalt in zwei Zeilen fällt.

Die loadingAnimation-Funktion fügt eine CSS-Klasse zu dem Element hinzu, das die Intro-CSS-Übergänge bereitstellt:

 const loadingAnimation = function () { slider.hero.classList.add('ready'); slider.current.addEventListener('transitionend', start, { once: true }); }

Da unser Schieberegler das letzte Element in der CSS-Übergangszeitachse ist, warten wir auf das Ende des Übergangs und rufen die Startfunktion auf. Durch die Bereitstellung eines zusätzlichen Parameters als Objekt stellen wir sicher, dass dieser nur einmal ausgelöst wird.

Schauen wir uns die Startfunktion an:

 const start = function () { autoplay(true); wheelControl(); window.innerWidth <= 1024 && touchControl(); slider.aux.addEventListener('transitionend', loaded, { once: true }); }

Wenn also das Layout fertig ist, wird sein anfänglicher Übergang durch die Funktion loadingAnimation ausgelöst und die Startfunktion übernimmt. Es löst dann die Autoplay-Funktionalität aus, aktiviert die Radsteuerung, bestimmt, ob wir uns auf einem Touch- oder Desktop-Gerät befinden, und wartet auf den ersten Übergang der Titelfolie, um die entsprechende CSS-Klasse hinzuzufügen.

Automatisches Abspielen

Eine der Kernfunktionen in diesem Layout ist die Autoplay-Funktion. Gehen wir die entsprechende Funktion durch:

 const autoplay = function (initial) { slider.autoplay = true; slider.items = slider.hero.querySelectorAll('[data-index]'); slider.total = slider.items.length / 2; const loop = () => changeSlide('next'); initial && requestAnimationFrame(loop); slider.handle = utils().requestInterval(loop, slider.interval); }

Zuerst setzen wir das Autoplay-Flag auf true, was anzeigt, dass sich der Schieberegler im Autoplay-Modus befindet. Dieses Flag ist nützlich, wenn bestimmt wird, ob die automatische Wiedergabe erneut ausgelöst werden soll, nachdem der Benutzer mit dem Schieberegler interagiert hat. Wir verweisen dann auf alle Slider-Elemente (Folien), da wir ihre aktive Klasse ändern und die Gesamtanzahl der Iterationen berechnen, die der Slider haben wird, indem wir alle Elemente addieren und durch zwei dividieren, da wir zwei synchronisierte Slider-Layouts haben (Haupt und Aux). aber nur ein „Schieberegler“ an sich, der beide gleichzeitig ändert.

Der interessanteste Teil des Codes hier ist die Schleifenfunktion. Es ruft slideChange auf und gibt die Schieberichtung an, auf die wir gleich noch eingehen werden. Die Schleifenfunktion wird jedoch ein paar Mal aufgerufen. Mal sehen warum.

Wenn das anfängliche Argument als wahr ausgewertet wird, rufen wir die Schleifenfunktion als requestAnimationFrame Callback auf. Dies geschieht nur beim ersten Schieberladen, was einen sofortigen Schieberwechsel auslöst. Mit requestAnimationFrame führen wir den bereitgestellten Callback kurz vor dem nächsten Frame-Repaint aus.

Da wir jedoch weiterhin im Autoplay-Modus durch die Folien gehen möchten, verwenden wir einen wiederholten Aufruf derselben Funktion. Dies wird normalerweise mit setInterval erreicht. Aber in diesem Fall verwenden wir eine der Hilfsfunktionen – requestInterval . Während setInterval gut funktionieren würde, ist requestInterval ein fortschrittliches Konzept, das auf requestAnimationFrame und einen leistungsfähigeren Ansatz bietet. Es stellt sicher, dass die Funktion nur dann erneut ausgelöst wird, wenn der Browser-Tab aktiv ist.

Mehr über dieses Konzept in diesem großartigen Artikel finden Sie unter CSS-Tricks. Bitte beachten Sie, dass wir den Rückgabewert dieser Funktion unserer Eigenschaft slider.handle . Diese eindeutige ID, die die Funktion zurückgibt, steht uns zur Verfügung und wir verwenden sie, um die automatische Wiedergabe später mit cancelAnimationFrame .

Folienwechsel

Die slideChange Funktion ist die Hauptfunktion im Gesamtkonzept. Es ändert die Folien, egal ob es durch Autoplay oder durch Benutzerauslöser erfolgt. Es kennt die Richtung des Schiebereglers und bietet Schleifen, sodass Sie bei der letzten Folie mit der ersten Folie fortfahren können. Hier ist, wie ich es codiert habe:

 const changeSlide = function (direction) { slider.idle = false; slider.hero.classList.remove('prev', 'next'); if (direction == 'next') { slider.activeIndex = (slider.activeIndex + 1) % slider.total; slider.hero.classList.add('next'); } else { slider.activeIndex = (slider.activeIndex - 1 + slider.total) % slider.total; slider.hero.classList.add('prev'); } //reset classes utils().removeClasses(slider.items, ['prev', 'active']); //set prev const prevItems = [...slider.items] .filter(item => { let prevIndex; if (slider.hero.classList.contains('prev')) { prevIndex = slider.activeIndex == slider.total - 1 ? 0 : slider.activeIndex + 1; } else { prevIndex = slider.activeIndex == 0 ? slider.total - 1 : slider.activeIndex - 1; } return item.dataset.index == prevIndex; }); //set active const activeItems = [...slider.items] .filter(item => { return item.dataset.index == slider.activeIndex; }); utils().addClasses(prevItems, ['prev']); utils().addClasses(activeItems, ['active']); setCurrent(); const activeImageItem = slider.main.querySelector('.active'); activeImageItem.addEventListener('transitionend', waitForIdle, { once: true }); }

Die Idee ist, die aktive Folie basierend auf ihrem Datenindex zu bestimmen, den wir von HTML erhalten haben. Lassen Sie uns jeden Schritt ansprechen:

1. Setzen Sie das Leerlauf-Flag des Schiebereglers auf „false“. Dies zeigt an, dass ein Folienwechsel im Gange ist und Rad- und Berührungsgesten deaktiviert sind.
2. Die vorherige CSS-Klasse für die Schiebereglerrichtung wird zurückgesetzt und wir suchen nach der neuen. Der Direction-Parameter wird entweder standardmäßig als „next“ bereitgestellt, wenn wir von der Autoplay-Funktion kommen, oder von einer vom Benutzer aufgerufenen Funktion wheelControl oder touchControl .
3. Basierend auf der Richtung berechnen wir den aktiven Slide-Index und stellen dem Slider die CSS-Klasse der aktuellen Richtung zur Verfügung. Diese CSS-Klasse wird verwendet, um festzulegen, welcher Übergangseffekt verwendet wird (z. B. von rechts nach links oder von links nach rechts).
4. Slides erhalten ihre „Status“-CSS-Klassen (prev, active) zurückgesetzt, indem eine andere Hilfsfunktion verwendet wird, die CSS-Klassen entfernt, aber auf einer NodeList aufgerufen werden kann, anstatt nur auf einem einzelnen DOM-Element. Danach werden nur vorherigen und derzeit aktiven Folien diese CSS-Klassen hinzugefügt. Dadurch kann das CSS nur auf diese Folien abzielen und einen angemessenen Übergang bereitstellen.
5. setCurrent ist ein Callback, der den Slider-Indikator basierend auf dem activeIndex aktualisiert.
6. Schließlich warten wir auf das Ende des Übergangs der aktiven Bildfolie, um den waitForIdle Callback auszulösen, der die automatische Wiedergabe neu startet, wenn sie zuvor vom Benutzer unterbrochen wurde.

Benutzersteuerung

Basierend auf der Bildschirmgröße habe ich zwei Arten von Benutzersteuerungen hinzugefügt – Rad und Berührung. Radsteuerung:

 const wheelControl = function () { slider.hero.addEventListener('wheel', e => { if (slider.idle) { const direction = e.deltaY > 0 ? 'next' : 'prev'; stopAutoplay(); changeSlide(direction); } }); }

Hier hören wir auf wheel even, und wenn sich der Slider derzeit im Ruhemodus befindet (aktuell keinen Folienwechsel animiert), bestimmen wir die Richtung des Rads, rufen stopAutoplay auf, um die automatische Wiedergabefunktion zu stoppen, falls sie ausgeführt wird, und ändern die Folie basierend auf der Richtung. Die Funktion stopAutoplay ist nichts anderes als eine einfache Funktion, die unser Autoplay-Flag auf den Wert false setzt und unser Intervall abbricht, indem sie die Dienstprogrammfunktion cancelRequestInterval und ihr das entsprechende Handle übergibt:

 const stopAutoplay = function () { slider.autoplay = false; utils().clearRequestInterval(slider.handle); }

Ähnlich wie wheelControl haben wir touchControl , das sich um Berührungsgesten kümmert:

 const touchControl = function () { const touchStart = function (e) { slider.ts = parseInt(e.changedTouches[0].clientX); window.scrollTop = 0; } const touchMove = function (e) { slider.tm = parseInt(e.changedTouches[0].clientX); const delta = slider.tm - slider.ts; window.scrollTop = 0; if (slider.idle) { const direction = delta < 0 ? 'next' : 'prev'; stopAutoplay(); changeSlide(direction); } } slider.hero.addEventListener('touchstart', touchStart); slider.hero.addEventListener('touchmove', touchMove); }

Wir hören auf zwei Ereignisse: touchstart und touchmove . Dann berechnen wir die Differenz. Wenn es einen negativen Wert zurückgibt, wechseln wir zur nächsten Folie, da der Benutzer von rechts nach links gewischt hat. Wenn der Wert andererseits positiv ist, was bedeutet, dass der Benutzer von links nach rechts gewischt hat, lösen wir slideChange aus, wobei die Richtung als „vorherig“ übergeben wird. In beiden Fällen wird die Autoplay-Funktion gestoppt.

Dies ist eine ziemlich einfache Implementierung von Benutzergesten. Um darauf aufzubauen, könnten wir Zurück-/Weiter-Schaltflächen hinzufügen, um slideChange beim Klicken auszulösen, oder eine Liste mit Aufzählungszeichen hinzufügen, um basierend auf ihrem Index direkt zu einer Folie zu gehen.

Zusammenfassung und abschließende Gedanken zu CSS

Also los geht's, eine reine CSS/JS-Methode zum Codieren eines nicht standardmäßigen Slider-Layouts mit modernen Übergangseffekten.

Ich hoffe, Sie finden diesen Ansatz als Denkweise nützlich und könnten etwas Ähnliches in Ihren Front-End-Projekten verwenden, wenn Sie für ein Projekt codieren, das nicht unbedingt konventionell entworfen wurde.

Für diejenigen unter Ihnen, die sich für den Bildübergangseffekt interessieren, gehe ich in den nächsten Zeilen darauf ein.

Wenn wir uns die HTML-Struktur der Folien, die ich im Einführungsabschnitt bereitgestellt habe, noch einmal ansehen, werden wir sehen, dass jede Bildfolie ein div mit der CSS-Klasse abs-mask . Was dieses div tut, ist, dass es einen Teil des sichtbaren Bildes um einen bestimmten Betrag verbirgt, indem es overflow:hidden verwendet und es in eine andere Richtung als das Bild versetzt. Wenn wir uns zum Beispiel ansehen, wie die vorherige Folie codiert ist:

 &.prev { z-index: 5; transform: translate3d(-100%, 0, 0); transition: 1s $easing; .abs-mask { transform: translateX(80%); transition: 1s $easing; } }

Die vorherige Folie hat einen Versatz von -100 % in ihrer X-Achse, wodurch sie von der aktuellen Folie nach links verschoben wird. Das innere abs-mask Div wird jedoch um 80 % nach rechts verschoben, wodurch ein schmaleres Ansichtsfenster bereitgestellt wird. Dies führt in Kombination mit einem größeren Z-Index für das aktive Dia zu einer Art Abdeckungseffekt – das aktive Bild überdeckt das vorherige und erweitert gleichzeitig seinen sichtbaren Bereich, indem es die Maske bewegt, die die vollständige Ansicht bietet.