Advertisement
  1. Web Design
  2. Site Elements

Wie man die Verwendung von jQuery-Schiebereglern in Ihren Designs startet

by
Read Time:15 minsLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

jQuery-Schieberegler bieten eine einfache und elegante Möglichkeit, Inhalte anzuzeigen, ohne wertvolle Immobilien auf Ihrer Webseite aufzugeben. Sie sind immer beliebter geworden und können auf verschiedene Arten eingesetzt werden. Lassen Sie uns die beliebten Stile durchgehen, einen Schieberegler auswählen und einen in eine Demo-Site integrieren.


Ein kleiner Hintergrund

Es war einmal ein Bild im Web, das nur auf eine Weise angezeigt wurde: als flaches JPG, GIF oder PNG. Vor einigen Jahren lernten Bilder neue Tricks. Sie gruppierten sich und tauchten unter dem Applaus der Besucher in jQuery-Schiebereglern auf.

Seitdem haben sie eine Vielzahl neuer Tricks gelernt, die sie zu erstklassigem Material für jeden Webdesigner machen. Unabhängig davon, ob Sie sie zuvor verwendet haben oder nicht, gibt Ihnen dieses Tutorial einen Einblick in die verschiedenen Varianten von Schiebereglern, wann sie in einem Design verwendet werden sollen, und wir führen Sie sogar durch eine Installation von einem.

Wenn es eine Sache gibt, die jQuery-Schieberegler nicht haben, ist es ein konsistenter Name. Der Schieberegler umfasst eine Vielzahl von Aliasnamen: Galerie, Karussell, Promos und Rotatoren, aber alle bieten dieselbe allgemeine Funktion: Zeigen Sie mehrere Inhaltselemente in einem gemeinsam genutzten Bereich auf der Seite an. Für den Zweck dieses Artikels werde ich sie alle als "Schieberegler" bezeichnen.

jQuery-Schieberegler können für fast alles verwendet werden, aber die meisten werden verwendet, um eine Reihe von Fotos in einem Diashow-Format anzuzeigen, wie dies früher von Adobe Flash gehandhabt wurde. Viele bieten eine Reihe von Übergangseffekten zwischen Folien und können über vorherige / nächste Schaltflächen, Registerkarten oder Miniaturansichten gesteuert werden.


Beliebte Stile von jQuery-Schiebereglern

Die Anzahl und Vielfalt der Schieberegler wächst stetig, sodass es nie einfacher war, einen Schieberegler zu finden, der Ihren Anforderungen entspricht. Sie sind in allen Formen, Größen und Größen erhältlich - einige davon sind kostenlos. Wenn Sie also für einen Schieberegler bezahlen, ist dieser normalerweise mit großartigen Funktionen ausgestattet.

Lassen Sie uns einige der beliebtesten Arten von Schiebereglern unten durchgehen. Beachten Sie, dass die meisten gezeigten Beispiele aus den nicht gestalteten Demoversionen stammen und alle mit einigen grundlegenden CSS-Kenntnissen und dem Lesen der Dokumentation angepasst werden können.

Standard Photo Slider

jquery photo sliderjquery photo sliderjquery photo slider Verwendetes Beispiel: NivoSlider - http://nivo.dev7studios.com/

Ein sehr beliebter Schieberegler ist der Foto-Schieberegler. Viele akzeptieren ein Bild und einige Metadaten wie eine Beschriftung, die häufig automatisch aus dem Alt- oder Titel-Tag abgerufen werden.

Vorteile: In der Regel am einfachsten für Anfänger. Der Fokus wird direkt auf ein großes Bild gelegt, das Sie auswählen. Viele haben mehrere Übergangseffekte zwischen Folien durch Verschieben, Überblenden, Zoomen und mehr.

Nachteile: Wenn Sie über eine Vielzahl von Inhalten verfügen, die Sie anzeigen müssen, z. B. HTML, Bilder oder Videos, ist ein Schieberegler für gemischte Inhalte möglicherweise die bessere Wahl. In den meisten Fällen müssen Sie sich an Bilder halten.


Schieberegler für gemischte Inhalte

jquery mixed contentsliderjquery mixed contentsliderjquery mixed contentslider Verwendetes Beispiel: Anything Slider - http://github.com/chriscoyier/AnythingSlider

Mit den Schiebereglern für gemischte Inhalte können Sie dem Foto-Schieberegler ähnlich wie mehr als nur Bilder verwenden. Überprüfen Sie alle Optionen, wenn Sie einen Bildschieberegler auswählen. Einige erlauben HTML, sind jedoch möglicherweise nicht in der Liste der primären Funktionen aufgeführt.

Vorteile: Perfekt für die Anzeige von Video-, HTML- und Bildinhalten in demselben Schieberegler, falls erforderlich.

Nachteile: Mit Schiebereglern für gemischte Inhalte kann die Arbeit etwas fortgeschrittener sein als mit Ihrem Standard-Foto-Schieberegler.


Schieberegler im Galeriestil

jquery gallery sliderjquery gallery sliderjquery gallery slider Verwendetes Beispiel: Galleria - http://devkick.com/lab/galleria/

Der Galeriestil wird häufig in Fotoanwendungen verwendet. Die Navigation besteht häufig aus Miniaturansichten, um die Bilder in Ihrer Sammlung zu durchsuchen.

Vorteile: Sehr einfach für Benutzer, um die Bilder zu durchsuchen, die sie schnell sehen möchten.

Nachteile: Oft nimmt mehr Platz auf der Seite ein als ein Standard-Schieberegler, um das Bild und alle Miniaturansichten anzupassen.


3D Block Slider

3d Block slider Cu3er cuber3d Block slider Cu3er cuber3d Block slider Cu3er cuber Verwendetes Beispiel: Cu3er - http://getcu3er.com/

Denken Sie an einen Zauberwürfel, der im Internet ohne Kopfschmerzen erstellt wurde. Das ist im Grunde genommen ein 3D-Block-Schieberegler - er ist vom visuellen Standpunkt aus unglaublich beeindruckend und kann perfekt sein, um einer Site das gewisse Extra an Spannung zu verleihen.

Vorteile: Einer der visuell beeindruckendsten Schieberegler da draußen. Wenn Besucher es noch nicht gesehen haben, könnten ihre Kiefer auf den Boden fallen.

Nachteile: Während die restlichen Schieberegler in diesem Lernprogramm jQuery sind, sind die meisten 3D-Blockschieberegler in einer Kombination aus Adobe Flash und XML erstellt. Dies ist nicht das "standardfreundlichste" Format. Diese Schieberegler benötigen möglicherweise etwas mehr Zeit zum "Vorladen". Da sie mit Flash erstellt wurden, kann die Installation auch etwas schwieriger sein, wenn Sie nicht mit Flash vertraut sind.


3D Space Slider

jquery coverflow sliderjquery coverflow sliderjquery coverflow slider Verwendetes Beispiel: Bildfluss - http://cool-javascripts.com/effects/image-flow-09.html

Dieser Slider-Effekt wurde vom Cover-Flow-Effekt von Apple inspiriert und ist eine beeindruckende Möglichkeit, Ihre Arbeit anzuzeigen. In Verbindung mit einer Website mit minimalem Stil kann sich dieser Schieberegler wie zu Hause fühlen.

Vorteile: Dieser Stil kann eine sehr beeindruckende und sehr interaktive Möglichkeit für Benutzer sein, eine Bildergalerie zu durchsuchen, in der Ihre Arbeit präsentiert wird.

Nachteile: Viele haben eine kleine Bildlaufleiste oder verwenden das Mausrad oder die Tastatur, um die Bilder anzuzeigen, was bei unbeabsichtigtem Scrollen etwas umständlich sein kann.


Schieberegler in voller Größe

Der Schieberegler in voller Größe ist so, wie es scheint - ein Schieberegler, der die gesamte Seite einnimmt, um Ihre Arbeit auf eine Weise zu präsentieren, die nicht zu übersehen ist.

Vorteile: Wenn Sie einen "go big or go home" -Stil haben, werden sie wirklich nicht viel größer.

Nachteile: Die Integration in eine Site ist möglicherweise etwas schwierig, da sie den Bildschirm mit Ihrer Arbeit füllen sollen. Die verwendeten Bilder müssen ziemlich groß sein, um neue hochauflösende Bildschirme zu füllen.


Miniaturbild-Schieberegler

jquery thumbnail sliderjquery thumbnail sliderjquery thumbnail slider Verwendetes Beispiel: jCarousel Lite - http://www.gmarwaha.com/jquery/jcarousellite/

Manchmal befinden Sie sich in einer Situation, in der Sie ein Bildraster anzeigen und ein schnelles Durchsuchen ermöglichen möchten, ohne dass der Benutzer eine zweite oder dritte Seite lädt.

Einige Schieberegler können mehrere Bilder pro Folie oder mehrere Folien gleichzeitig anzeigen. Überprüfen Sie daher die Funktionsliste. In jCarousel Lite, das oben vorgestellt wurde, ist "sichtbar" auf 3 gesetzt und zeigt drei Folien gleichzeitig an.

Vorteile: Ermöglicht das gleichzeitige Scrollen mehrerer Elemente, wenn kein großes Bild oder Inhalt benötigt wird. Ideal für Gruppen von Gegenständen oder wenn Sie den Raum auf der Website haben.

Nachteile: Dieser Stil hat nicht viele Nachteile, außer dass er etwas komplexer einzurichten ist als der Standard-Foto-Schieberegler.


Horizontale Schiebelaschen / Akkordeonregler

jquery accordion tabs sliderjquery accordion tabs sliderjquery accordion tabs slider Verwendeter Beispielschieberegler: HSlides - http://plugins.jquery.com/project/hslides Das Beispielbild stammt aus dem Circo-Thema: http://bannersmonster.com/themes/Circo/

Der Akkordeonstil macht das Durchsuchen von vorgestellten Gegenständen ein wenig wie das Durchblättern von Seiten eines Buches. Hierbei wird ein klassisches Benutzerverhalten verwendet, bei dem nur ein Ausschnitt des Inhalts angezeigt wird, bevor die gesamte Akkordeonbox herausgeschoben wird.

Vorteile: Eine sehr einzigartige und unterhaltsame Art, Ihre Artikel anzuzeigen. Der gestufte Stil kann dazu beitragen, das Ordnungsgefühl zu stärken, wenn Sie ein Inhaltsparadigma "Schritt 1, Schritt 2, Schritt 3" verwenden.

Nachteile: Nicht besonders gut für Dutzende von Folien und für neue Webbenutzer kann es etwas schwierig sein, versehentlich verschiebbare Elemente mit einem Mauspass zu öffnen und zu schließen. Ziehen Sie einen Klick in Betracht, um den Tab-Stil oder die Einstellung zu öffnen, falls verfügbar.


Großer Schieberegler mit Registerkarten

jquery large tabbed sliderjquery large tabbed sliderjquery large tabbed slider Verwendetes Beispiel: Funktionsliste - http://jqueryglobe.com/article/feature-list

Das Gefühl, das Sie bei Verwendung des großen Schiebereglers mit Registerkarten erhalten, ist ein Gefühl der Einfachheit - Schritt 1, Schritt 2, Schritt 3. Eine großartige Möglichkeit, progressive Änderungen, Funktionen oder Produktoptionen anzuzeigen.

Vorteile: Sehr aufmerksamkeitsstark bei richtigem Styling. Wie das Akkordeon zeigt dieser Schieberegler einen Hinweis darauf, was sich in jeder Folie befindet. Dies kann ideal für Besucher sein, die nach bestimmten Informationen suchen.

Nachteile: Möglicherweise müssen Sie die Anzahl der Elemente begrenzen, die Sie einschließen möchten, es sei denn, Sie verwenden einen Schieberegler mit Registerkarten wie den iTunes Music Store.


Wann Sie Ihren eigenen Schieberegler entwerfen sollten

Obwohl die Vielfalt und Anzahl der Schieberegler stetig zunimmt, können Sie manchmal einfach keine Lösung für Ihre spezielle Situation finden.

Wenn Sie in Ihren Projekten viele Schieberegler verwenden, lohnt es sich, sich damit zu beschäftigen und wirklich zu lernen, wie sie funktionieren, und selbst einen zu erstellen. Der beste Weg zu lernen ist mit gutem Beispiel.

Zerlegen Sie vorhandene Schieberegler, sehen Sie, wie sie funktionieren, und lernen Sie daraus. Stehlen Sie nicht den Code anderer Entwickler, sondern konzentrieren Sie sich auf das, was sie tun: Animationen, Ändern der Deckkraft und Überprüfen der von ihnen angebotenen Einstellungen und Schreiben auf Ihre eigene Weise.

Mit Tools wie Firebug können Sie einen Schieberegler in Echtzeit "untersuchen" und dabei zusehen, wie er den Z-Index, die Deckkraft oder die Position manipuliert, um Inhalte von einer Folie zur nächsten zu verschieben.

Sie erhalten ein besseres Verständnis dafür, was unter der Haube vor sich geht, können Anpassungen vornehmen und Probleme später schneller finden, indem Sie in so viele Schieberegler wie möglich greifen, um zu erfahren, wie sie funktionieren.


Den richtigen jQuery-Schieberegler für Sie finden

Das einzige, was zahlreicher ist als die Anzahl der jQuery-Schieberegler, ist die Anzahl der Websites, auf denen sie angezeigt werden. Anstatt zu versuchen, alle hier aufzulisten (jede Woche kommen neue heraus!), Lassen Sie uns durchgehen, wie Sie eine finden, die zu Ihnen passt:

Eine schnelle Google-Suche zeigt, dass Schieberegler an verschiedenen Orten gefunden werden können:

Zusammenfassung der Beiträge

Oft mit dem Titel "25 nützliche JQuery Content Slider-Skripte" betitelt - dies sind Beiträge, die erstellt wurden, um die verschiedenen zur Zeit verfügbaren Schieberegler zu sammeln und zu überprüfen. Lesen Sie die Kommentare sowie den Artikel, um die Meinungen anderer Personen zur Sammlung zu sehen.

Tutorial-Sites

Websites, die Tutorials zum Erstellen von Schiebereglern anbieten, enthalten häufig den endgültigen Quellcode des Projekts, sodass Sie eine schrittweise Anleitung zur Erstellung und zum endgültigen Arbeitsergebnis erhalten. Sofern nicht ausdrücklich angegeben, dient das Quellprojekt nur zu Bildungszwecken. Fragen Sie vor der Verwendung in Projekten nach.

Online-Marktplätze

CodeCanyon bietet eine ganze Kategorie für Premium-Slider. https://codecanyon.net/category/javascript/sliders

Quelltext anzeigen

Manchmal stoßen Sie auf eine Site mit einem Schieberegler und möchten sehen, welches Plugin sie möglicherweise verwendet haben. Da JavaScript ein clientseitiges Skript ist, erstellen Sie eine Ansichtsquelle der Seite und prüfen Sie, welche JavaScript-Dateien importiert werden. Die Plugin-Informationen sollten oben im Quellenskript des Plugins mit einer URL enthalten sein, um weitere Informationen zum Plugin zum Herunterladen zu erhalten und Dokumentation.

Seien Sie höflich gegenüber den Anstrengungen, die andere unternommen haben, lesen und befolgen Sie die enthaltenen Lizenzvereinbarungen und geben Sie Kredit, wenn Kredit fällig ist.


Entscheidung für einen Slider

Die Auswahl eines Schiebereglers hängt weitgehend von den Funktionen und Optionen ab, die Sie benötigen, sowie vom Gesamtstil, den Sie anstreben. Entscheiden Sie, welche Art von Inhalt angezeigt werden soll, wie Benutzer darin navigieren sollen und welcher Schieberegler Ihren Anforderungen am besten entspricht.

Wenn Sie Ihre Auswahl eingegrenzt haben, vergleichen Sie die gesamte Skriptgröße und prüfen Sie, ob sie mit allen Browsern kompatibel ist.

Einige Schieberegler werden in einer "Lite" -Version wie jQuery Cycle Lite angeboten, wenn Sie die Gesamtdateigröße in Ihrem Projekt niedrig halten möchten. Oft fehlen in der Light-Version nur die zusätzlichen Übergangseffekte, wobei die beliebtesten verfügbaren Optionen beibehalten werden.

Wenn Sie kein jQuery-Master sind, wählen Sie einen Schieberegler mit großartigen Live-Demos, die Sie herunterladen können, und Dokumentationen, die Sie bei Ihren Anpassungen unterstützen.


Einen Slider häuten

Eines der großartigen Dinge bei der Verwendung eines vorgefertigten Schiebereglers ist, dass die meisten von ihnen unglaublich einfach entsprechend Ihren Anforderungen neu gestaltet werden können. Dieser Prozess (normalerweise nur "Häuten" genannt) ist nicht so schwierig, wie es scheint. Normalerweise muss nur eine einfache CSS-Datei bearbeitet werden. Das komplexeste Skinning ist normalerweise das Austauschen von Grafiken, die Sie als Standardgrafiken erstellt haben (z. B. Hintergründe und Schaltflächen).

Neben dem Enthäuten von Schiebereglern ist es auch erwähnenswert, dass es bei den meisten Schiebereglern einfach ist, die Größe an die von Ihnen entworfene Website anzupassen.


Integrieren von Schiebereglern in eine vorhandene Site

Das Einfügen eines Schiebereglers in ein vorhandenes Design ist kein Einzelschritt, aber die meisten Schiebereglerskripte enthalten zunächst eine grundlegende Beispielseite, auf der jQuery, CSS, Beispielinhalte importiert und das Plugin mit den Standardeinstellungen initialisiert werden.

Importieren wir jQuery Cycle in eine kurze Beispielsite, die für dieses Tutorial erstellt wurde.

Laden Sie die Vorher- und Nachher-Websites herunter, um sie zu verfolgen.


1. Anfängliche Standortstruktur

Die Demo-Site besteht aus einfachem HTML, CSS und einem Bild, das als Ausgangspunkt für die Integration des Schiebereglers dient.

  • index.html - Die von uns verwendete Beispielhomepage
  • css/screen.css - Allgemeine Stilinformationen
  • images/sample_water.jpg - Aktuelles statisches Bild für die Homepage

2. Laden Sie jQuery Cycle herunter

Wir werden das jQuery Cycle-Plugin für diese Demo integrieren.

  • Besuchen Sie http://jquery.malsup.com/cycle/
  • Laden Sie die neueste Version herunter und entpacken Sie sie auf Ihren Computer.
  • Kopieren Sie jquery.cycle.all.min.js auf Ihre Site in einem neuen Verzeichnis /js/

3. Importieren Sie die erforderlichen Skripte

Importieren Sie die jQuery-Bibliothek und das Cycle-Plugin in das

Ihrer Website durch Hinzufügen dieses Codes:

Das erste Skript sollte die neueste Version von jQuery sein. Sie können es von jquery.com herunterladen oder wie oben beschrieben aus den Google-Bibliotheken laden.

Das zweite Skript ist die Plugin-Quelle, die wir im Ordner /js/ abgelegt haben.


4. Fügen Sie den Slider HTML hinzu

Tauschen Sie das aktuelle statische sample_water.jpg-Bild, das auf der Demo-Site verwendet wird, gegen eine ungeordnete Liste für Folien aus:

Wir werden nur drei Bilder verwenden, um loszulegen. Beachten Sie das Attribut id="promo". Wir werden dies später verwenden, um unserem Plugin mitzuteilen, dass dies der Container unserer Folien ist. Da die Folien im Wesentlichen nur eine Liste verwandter Inhalte sind, ist ein UL-Tag eine gute Wahl.


5. Fügen Sie die optionale Schiebereglernavigation hinzu

Unter der ungeordneten Liste der oben hinzugefügten Promos fügen wir die Navigation zur Steuerung der Folien hinzu. Das Plugin erstellt die einzelnen Navigationslinks zur Laufzeit dynamisch, wenn Sie Folien zur Liste hinzufügen und daraus entfernen.

Die Klasse der nächsten Folienschaltfläche entspricht dem Parameter 'next', mit dem die Folien manuell vorgerückt werden.

Der Promo-Index wird automatisch generiert, wenn der Parameter 'Pager' in den Optionen festgelegt ist. Durch manuelle Eingabe können wir steuern, wo es auf der Seite angezeigt wird, falls Sie es an einem anderen Ort als dem Plugin platzieren möchten.


6. Gestalten Sie den Schieberegler

Fügen wir CSS hinzu, um die Schiebereglerliste zu formatieren. Einige Schieberegler wie Nivo Slider verfügen über ein benutzerdefiniertes Stylesheet, das Sie herunterladen und loslegen können. Für diese Demo fügen wir jedoch unser benutzerdefiniertes CSS direkt am Ende der Hauptdatei screen.css der Site hinzu.


7. Initialisieren Sie das Plugin:

Zu diesem Zeitpunkt haben wir jQuery und das Plugin importiert, aber nichts sagt dem Plugin, welches Element auf der Seite unser Schieberegler ist oder welche Optionen eingeschlossen werden sollen - es muss initialisiert werden.

Erstellen Sie eine Datei mit dem Namen setup.js und legen Sie sie im Verzeichnis /js/ ab.

Importieren Sie es unter den jQuery- und Cycle-Skripten, die Sie in das importiert haben

Bereich der Site weiter oben im Tutorial.

Es ist wichtig, dass Sie jQuery, jQuery Cycle und dann setup.js in genau dieser Reihenfolge importieren, da sonst das Plugin nicht funktioniert.

Fügen Sie in setup.js den folgenden Code hinzu:

Lassen Sie mich erklären, was im obigen Code vor sich geht.

Wir beginnen mit der Überprüfung, ob das Dokument mit dem Dokument bereit ist. Andernfalls versucht das Plugin möglicherweise, Elemente auf der Seite zu ändern, die nicht verfügbar oder bereit sind.

In der nächsten Zeile wird dem Cycle-Plugin mitgeteilt, welches Element wir als Container für die Elemente verwenden, die wir durchlaufen möchten. In unserem Fall hat der Container eine Promo-ID, daher geben wir #promo ein.

Die von fx bis pause aufgelisteten Elemente sind Optionen, die wir an das Plugin übergeben. Wenn wir keine einschließen und einfach verwenden: $('#promo').cycle(); Das Plugin würde seine Standardeinstellungen verwenden. Optionen werden in einer durch Kommas getrennten Liste aufgeführt. Die Anzahl und Art der Optionen variieren je nach Plugin. Informationen zum jQuery-Zyklus finden Sie jedoch unter http://jquery.malsup.com/cycle/options.html

Die Optionen next und pager beziehen sich auf die Navigation, die wir in Schritt 5 oben erstellt haben, und können entfernt werden, wenn Sie die Navigation nicht in den Schieberegler aufnehmen möchten.

Laden Sie die Vorher- und Nachher-Websites herunter, um sie zu verfolgen.


Denken Sie außerhalb des Containers

Schieberegler müssen keine großen Foto-Schieberegler sein, die sich über eine Seite Ihrer Website erstrecken. Verwenden Sie diese Option, um Abschnitte mit rotierenden Inhalten wie Testimonials, Ihre neuesten Tweets oder beliebte Blog-Artikel in Bereichen der Website anzuzeigen, die von dem zusätzlichen Raum profitieren könnten.

Danke fürs Lesen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.