CSS und Javascript Ant Carousel

Mit dem Aufkommen von CSS3 wurde es möglich, Animationen ohne Verwendung von JS-Bibliotheken wie beispielsweise jQuery zu erstellen. Mit der CSS3-Übergangseigenschaft können Sie andere Eigenschaften eines Elements (Breite, Höhe, Rand, Deckkraft usw.) problemlos ändern und die Zeit und das Gesetz der Transformation als Parameter festlegen. Ich biete ein kleines, aber recht funktionales Karussell in reinem Javascript an. Klein wie eine Ameise, die viel kleiner als eine Eule ist . Aber mit fast den gleichen Fähigkeiten.

Mit Ant-Karussell können Sie:

• zeige ein oder mehrere Elemente;
• Elemente können in Form eines endlichen oder unendlichen Bandes (in einer Schleife) dargestellt werden;
• Elemente automatisch scrollen;
• Die Navigation erfolgt durch Pfeile, Anzeigepunkte oder Umdrehen (für taktile Bildschirme).
• Passt sich automatisch an jede Bildschirmbreite an.

Wir legen unser Karussell in die Datei index.html (siehe Beispieldatei unten):


Die <ul> <li> -Elemente werden hier verwendet, aber <div> <div> kann stattdessen verwendet werden, wenn Sie dies bevorzugen. Pfeile und Anzeigepunkte befinden sich absolut in den jeweiligen Behältern. Für Pfeile werden Muster in Form von dreieckigen Klammern verwendet, die Sie bei Bedarf durch Ihre Muster oder die Bilderzeugung durch die Pseudoelemente ersetzen können : vorher und nachher .

Erstellen Sie ein Karussell mit drei sichtbaren Elementen und einer Elementbreite von 270 Pixel. Dann beträgt die maximale Karussellbreite 810 Pixel. Wir fügen die CSS-Datei hinzu:


Wir platzieren die Elemente in dem Container mit der Antikarussellliste , legen die Eigenschaft display: flex dafür fest und drücken alle Elemente an den linken Rand von justify-content: flex-start . Die Flex- Eigenschaft : 0 0 setzt Flex-Shrink automatisch auf 0 (Standard ist 1). Das Scrollen der Karussellelemente erfolgt unter Verwendung der Transitoneigenschaft, indem der Rand-Links- Einzug sanft von Null auf die Breite des Elements (in einer Richtung) oder von der Breite des Elements auf Null (in die andere Richtung) geändert wird. Für die Transformationsfunktion (Bildlauf) wird der Wert der Leichtigkeit verwendet .

Wir gehen zum Programm über. In den Programmoptionen können Sie konfigurieren:

• Anzahl der sichtbaren Elemente;
• Betrachten von Elementen in Form eines Bandes vom ersten bis zum letzten oder in einer Endlosschleife (das Band schließt sich in einem Ring);
• automatisches oder manuelles Scrollen von Elementen;
• Auto-Scroll-Intervall;
• Animationsgeschwindigkeit;
• Aktivieren / Deaktivieren von Navigationselementen: Pfeile, Anzeigepunkte, Umdrehen durch Berühren (für taktile Bildschirme).

Die Initialisierung des Programms beginnt mit der Tatsache, dass die Anzahl der Karussellelemente bestimmt wird, Anfangswerte internen Variablen zugewiesen werden, Ereignishandler Pfeilen und Punkten zugewiesen werden (falls verbunden). Wenn die automatische Bildlaufoption aktiviert ist, werden zusätzliche Handler zugewiesen, die den Bildlauf beenden, wenn Sie mit der Maus über die Karussellelemente fahren. Touch-Scrolling wird ausgelöst, wenn zwischen dem Punkt, an dem der Finger den Bildschirm berührt, und dem Punkt, an dem der Finger vom Bildschirm abgerissen wird, mehr als 20 Pixel liegen und die Gesamtzeit, die der Finger den Bildschirm berührt, weniger als 80 ms beträgt. Der Autor hat noch nicht viel Erfahrung mit diesem Karussell, daher müssen die angegebenen Werte möglicherweise geklärt werden. Für einen zuverlässigeren Betrieb des Scroll-Handlers kann der Abstand zwischen den Punkten auf 10 oder 15 Pixel verringert werden, und die Berührungszeit sollte auf 100 oder 120 ms erhöht werden. Der Benutzer dieses Karussells kann diese Werte selbst korrigieren, nachdem er einige Erfahrungen in seiner Verwendung gesammelt hat.

Der Bildlaufalgorithmus für Elemente hängt davon ab, ob die Schleifenoption aktiviert ist oder nicht. Wenn diese Option aktiviert ist, verringert sich beim Scrollen nach rechts (Funktion elemPrev ) die Eigenschaft margin-left der gesamten Zeile dieser this.crslList- Elemente von Null auf einen negativen Wert, der der Breite des ElemWidth- Elements entspricht. Gleichzeitig wird das letzte Element rechts geklont und vor dem ersten Element eingefügt. Danach wird das letzte Element gelöscht. Der Linie wird die Eigenschaft 'Übergang: Rand' + Optionen.Geschwindigkeit + 'ms Leichtigkeit' zugewiesen , wobei Optionen.Geschwindigkeit die Animationsgeschwindigkeit und Leichtigkeit die Animationsfunktion ist. Jetzt können Sie scrollen. Die Eigenschaft " Rand links" ändert sich reibungslos von einem negativen Wert auf Null, das gesamte Lineal verschiebt sich reibungslos nach rechts und das letzte Element steht an erster Stelle. Nach options.speed Mikrosekunden erhält die Zeile den vorherigen Wert 'Übergang: keine' .

 var elm, buf, this$ = this; elm = this.crslList.lastElementChild; buf = elm.cloneNode(true); this.crslList.insertBefore(buf, this.crslList.firstElementChild); this.crslList.removeChild(elm); this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; window.getComputedStyle(this.crslList). marginLeft; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '0px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;' }, this.options.speed); 

Wenn Sie n Elemente gleichzeitig scrollen müssen, wird die Permutation der Elemente n-mal in einer Schleife ausgeführt, und der Abstand zwischen Rand und Link erhöht sich n-mal.

Das Scrollen nach links ( elemNext- Funktion) erfolgt in umgekehrter Reihenfolge. Zunächst wird der Eigenschaft this.crslList die Eigenschaft 'Transition: Margin' + options.speed + 'ms Easy' zugewiesen, und das Lineal scrollt reibungslos nach links ( crslList.style.marginLeft = '-' + elemWidth + 'px' ). Ferner wird nach options.speed Mikrosekunden das erste Element geklont und am Ende des Lineals eingefügt, wonach das erste Element gelöscht wird. Das Lineal gibt den Wert 'Übergang: keine' zurück. Wenn Sie n Elemente gleichzeitig scrollen müssen, wird die Neuanordnung von Elementen wie im vorherigen Fall n-mal in einer Schleife durchgeführt und der Abstand zwischen Rand und linkem n-mal erhöht.

 var elm, buf, this$ = this; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;'; elm = this$.crslList.firstElementChild; buf = elm.cloneNode(true); this$.crslList.appendChild(buf); this$.crslList.removeChild(elm) this$.crslList.style.marginLeft = '0px' }, this.options.speed); 

Wenn die Zyklusoption deaktiviert ist, gibt es in diesem Fall keine Permutationen der Elemente, und die gesamte Elementlinie wird als Ganzes nach links oder rechts zu ihren Extrempunkten verschoben. Die Elementzeile this.crslList- Eigenschaft 'Transition: Margin' + options.speed + 'ms Easy' wird auch dann zugewiesen, wenn das Karussell initialisiert und nicht mehr gelöscht wird.

Das Karussell wird mit dem Namen der Ameisenkarussellklasse oder mit einer Kennung bezeichnet. Im zweiten Fall können Sie mehrere Karussells auf einer Seite platzieren. Eine Datei carousel index.html könnte folgendermaßen aussehen:

 <!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Ant-Carousel</title> <!--   --> <link rel="stylesheet" type="text/css" href="ant-files/ant-carousel-styles.css"> </head> <body> … <div class="ant-carousel"> <!--    --> … </div> … <footer> … </footer> <!--   --> <script src="ant-files/ant-carousel. js"></script> <!--   --> <script>new Ant()</script> </body> </html> 

Um mehrere Karussells auf einer Seite zu platzieren, müssen Sie sie per ID anrufen. Unterschiedliche Karussells können eine unterschiedliche Anzahl von Elementen aufweisen.

 <div class="ant-carousel" id=”first”> <!--   --> … <div class="ant-carousel" id=”second”> <!--   --> … <script>new Ant("first"); new Ant("second");</script> 

Alle Bilder stammen aus Open Source.

Vielen Dank für Ihre Aufmerksamkeit!