Share
In meinem Kurs "Optimieren Sie Ihre Website ohne AMP" habe ich Ihnen ausführlich gezeigt, wie Sie Ihre Website für blitzschnelle Leistung optimieren können ohne mit dem AMP von Google.
In diesem Video des Kurses erfahren Sie, wie Sie mit dem leichten Siema-Skript eine beliebte Komponente - ein Karussell aus sich drehenden Tweets - erstellen. Die Techniken, die Sie lernen werden, helfen Ihnen, ohne AMP eine hervorragende Leistung zu erzielen.
Dieses Video greift die vorherigen Lektionen des Kurses auf, in denen wir eine Website mit drei eingebetteten Tweets erstellt haben. Den vollständigen Quellcode für das Projekt finden Sie auf GitHub. In dieser Lektion machen wir aus diesen drei Tweets ein Karussell.
In der AMP-Version unserer Site wurde dies mit der Amp-Karussell benutzerdefiniertes Element. Stattdessen verwenden wir ein cooles kleines Skript namens Siema.
Siema erfüllt alle Kriterien, die wir mit unseren Skripten suchen:
Wir haben Siema bereits beim Einrichten unserer Datei in unser index.min.js-Skript eingefügt, und es wurde bereits in unsere pagecontent.html-Datei geladen, sodass wir es verwenden können.
Wir müssen nur einen kleinen Code hinzufügen pagecontent.html um unser Skript zu aktivieren.
const mySiema = newSiema (Selektor: '.slides');
Der Screenshot unten zeigt, wo er eingefügt werden soll:
Was wir hier tun, ist das Erstellen einer Konstante und die Benennung mySiema. Wir setzen diese Konstante gleich einer neuen Instanz von Siema und fügen dann ein Objekt mit einigen Parametern hinzu.
In den geschweiften Klammern fügen wir den Selektor der Eigenschaft hinzu und benennen den Selektor, nach dem Siema suchen sollte, um aus seinen Kindern ein Karussell zu machen. Früher haben wir die Klasse hinzugefügt .Folien Die Tweets enthalten. Wenn wir also mit Siema darauf zielen, wird jeder unserer Tweets in eine Rutsche verwandelt, die sich in unserem Karussell befindet.
Wenn Sie die Website jetzt überprüfen, sollte der erste Tweet als Folie angezeigt werden.
Es werden jedoch nicht die anderen angezeigt, da wir ein wenig zusätzlichen Code hinzufügen müssen, damit das Karussell automatisch abgespielt wird.
Damit das Karussell automatisch abgespielt wird, müssen wir unseren Code wie folgt ändern:
const mySiema = newSiema (Selektor: '.slides', Schleife: true); setInterval (() => mySiema.next (), 4000)
Was wir hier tun, sagt Siema, wie lange wir wollen, dass es zwischen jeder unserer Folien wartet. In der letzten Zeile setzen wir also das Intervall mit setInterval, Der Rest dieser Zeile teilt Siema mit, dass der Abstand zwischen den einzelnen Objekttritten 4.000 Millisekunden oder 4 Sekunden betragen soll.
Wenn wir gerade dabei sind, müssen wir auch Siema mitteilen, dass wir eine Schleife machen wollen. Also machen wir das mit der Leitung Schleife: wahr.
Jetzt springt das Karussell automatisch von einer Folie zur nächsten, wartet vier Sekunden dazwischen und springt dann zum Anfang zurück.
Es fehlt noch etwas, und dies sind einige kleine Knöpfe, mit denen wir manuell in unserem Karussell vor- oder zurückgehen können.
Um unsere Schaltflächen einzurichten, müssen Sie als erstes etwas HTML in derselben Datei hinzufügen. Fügen Sie das folgende Snippet in das Twitter-Karussell div, aber außerhalb der Folien div, weil wir nicht möchten, dass Siema diese Tasten als Dias behandelt, die in das Karussell gelegt werden müssen.
Dieser Code fügt einfach zwei SVG-Formen hinzu: ein kleines Dreieck, das nach links zeigt, und ein kleines Dreieck, das nach rechts zeigt.
Da wir nicht in ein Bild laden müssen, ist die Ladezeit noch schneller, und die Dateigröße dieses kleinen Codes für das Erstellen einer SVG-Form ist unglaublich klein.
Sie können sehen, dass wir den Klassennamen haben vorheriges auf den ersten unserer Knöpfe und dann Nächster am zweiten. Das sind die Klassen, die wir mit Siema anvisieren werden, und sagen, dass diese Tasten als Vorwärts- und Rückwärts-Tasten für das Karussell behandelt werden sollen.
Wir werden ein wenig JavaScript verwenden, um diese Elemente in unserem Code zu finden. An diesem Punkt waren Sie vielleicht an die Arbeit mit jQuery gewöhnt. Natürlich vermeiden wir die Verwendung von jQuery auf unserer Website, sodass wir keinen zusätzlichen Code zum Laden haben. Stattdessen ändern wir unseren Code mit zwei neue Zeilen hinzufügen, so dass es so aussieht:
In diesem Code fügen wir einen Dokumentabfrageselektor hinzu und geben dann den Selektor an, nach dem wir suchen möchten, dh die Klasse vorheriges. Dann fügen wir einen Ereignis-Listener hinzu und das Ereignis, auf das wir hören möchten, ist klicken.
Wenn nun jemand auf diese Schaltfläche auf der linken Seite klickt, werden wir eine Aktion auslösen, und der Rest der Zeile legt fest, was dieses Verhalten für die Schaltfläche auf der linken Seite ist.
In der nächsten Zeile machen wir dasselbe mit dem Button auf der rechten Seite, nur diesmal ersetzen wir vorheriges mit Nächster.
Wenn wir nun unsere Website überprüfen, können wir die vorherigen und nächsten Schaltflächen sehen. Wenn wir sie anklicken, können wir das Karussell beliebig durchgehen.
Jetzt müssen wir nur noch ein wenig zusätzlichen Code hinzufügen. In diesem Kurs haben wir eine Version der Website für Benutzer erstellt, die JavaScript in ihren Browsern deaktiviert haben. Wenn wir JavaScript jedoch jetzt deaktivieren, haben wir unsere schönen kleinen Anführungszeichen als Rückschläge, aber jetzt haben wir diese nutzlosen Navigationsschaltflächen hier.
So können wir das beheben, indem wir zu unserem gehen noscript.css Stylesheet und Hinzufügen:
.Karussellknopf Anzeige: keine;
Wenn wir nun unsere Website mit ausgeschaltetem JavaScript aktualisieren, können wir feststellen, dass wir diese Schaltflächen losgelassen haben.
Im gesamten Kurs "Optimieren Sie Ihre Website ohne AMP" lernen Sie, wie Sie eine vorhandene AMP-basierte Website in Nicht-AMP-Äquivalente konvertieren. In diesem Kurs erhalten Sie nützliche Methoden, mit denen Sie Ihre Websites schnell laufen lassen können, jedoch mit Optimierungstechniken, die Sie selbst entscheiden.
Sie können diesen Kurs mit einem Abonnement von Envato Elements sofort absolvieren. Für eine einmalige geringe monatliche Gebühr erhalten Sie nicht nur Zugriff auf diesen Kurs, sondern auch auf unsere wachsende Bibliothek mit über 1.000 Videokursen und branchenführenden eBooks für Envato Tuts+.
Außerdem erhalten Sie jetzt unbegrenzte Downloads aus der riesigen Envato Elements-Bibliothek mit mehr als 400.000 kreativen Elementen. Erstellen Sie mit einzigartigen Schriftarten, Fotos, Grafiken und Vorlagen und sorgen Sie schneller für bessere Projekte.
Accentsconagua