Share
jQuery-Schieberegler bieten eine einfache und elegante Möglichkeit, Inhalte anzuzeigen, ohne wertvolle Immobilien auf Ihrer Webseite aufzugeben. Sie haben in der Popularität zugenommen und können auf vielfältige Weise verwendet werden. Gehen wir die populären Styles durch, wählen Sie einen Slider aus und integrieren Sie ihn in eine Demo-Site.
Es war einmal so, dass ein Bild im Web nur eine Möglichkeit enthielt: als flaches JPG, GIF oder PNG. Vor einigen Jahren lernten Bilder neue Tricks. Sie gruppierten sich und fingen an, in jQuery-Schiebereglern zum Applaus von Besuchern in der ganzen Umgebung aufzutauchen.
Seitdem haben sie eine Fülle neuer Tricks gelernt, die sie zu einem idealen Material für jeden Webdesigner machen. Unabhängig davon, ob Sie sie zuvor verwendet haben oder nicht, dieses Tutorial gibt Ihnen einen Einblick in die verschiedenen Geschmacksrichtungen von Schiebereglern, wann sie in einem Design verwendet werden, und wir führen Sie durch eine Installation von einem.
Wenn es eine Funktion gibt, die jQuery-Slider nicht haben, ist dies ein konsistenter Name. Der Schieberegler enthält eine Vielzahl von Aliasnamen: Galerie, Karussell, Promos und Rotatoren, aber alle bieten dieselbe allgemeine Funktion: Mehrere Inhalte werden in einem gemeinsam genutzten Bereich auf der Seite angezeigt. In diesem Artikel werde ich sie alle als "Schieberegler" bezeichnen..
jQuery-Schieberegler können für fast alles verwendet werden, aber die meisten werden verwendet, um eine Anzahl von Fotos in einem Diashow-Format auf eine Weise anzuzeigen, die zuvor von Adobe Flash verarbeitet wurde. Viele bieten eine Reihe von Übergangseffekten zwischen den Folien und können mit den Schaltflächen Zurück / Weiter, Registerkarten oder Miniaturansicht gesteuert werden.
Die Anzahl und Vielfalt der Schieberegler nimmt ständig zu. Daher ist es noch nie einfacher, einen Schieberegler für Ihre Bedürfnisse zu finden. Sie sind in allen Formen, Größen und Größen erhältlich - eine Anzahl davon ist kostenlos. Wenn Sie also für einen Schieberegler bezahlen, ist er normalerweise mit tollen Funktionen ausgestattet.
Schauen wir uns ein paar der beliebtesten Schieberegler unten an. Beachten Sie, dass die meisten Beispiele aus den ungestylten Demo-Versionen stammen und alle mit etwas CSS-Grundkenntnissen und Lesen der Dokumentation angepasst werden können.
Ein sehr beliebter Schieberegler ist der Foto-Schieberegler. Viele akzeptieren ein Bild und einige Metadaten, z. B. eine Bildunterschrift, die oft automatisch aus dem Alt- oder Titel-Tag gezogen wird.
Vorteile: Normalerweise der einfachste Einstieg für Anfänger. Der Fokus wird direkt auf ein großes Bild gelegt, das Sie auswählen. Viele haben mehrere Übergangseffekte zwischen den Folien von Gleiten, Ausblenden, Zoomen und mehr.
Nachteile: Wenn Sie über eine Vielzahl von Inhalten verfügen, z. B. HTML, Bilder oder Video, müssen Sie einen Schieberegler für gemischte Inhalte bevorzugen. Bei den meisten müssen Sie sich an Bilder halten.
Ähnlich wie bei dem Foto-Schieberegler können Sie mit Schiebereglern für gemischte Inhalte mehr als nur Bilder verwenden. Überprüfen Sie alle Optionen bei der Auswahl eines Bildschiebereglers. Einige lassen HTML zu, sind jedoch möglicherweise nicht in der Liste der primären Features aufgeführt.
Vorteile: Ideal für die Anzeige von Video-, HTML- und Bildinhalten im selben Schieberegler, falls erforderlich.
Nachteile: Schieberegler für gemischte Inhalte können etwas weiterentwickelt werden als herkömmliche Foto-Schieberegler.
Der Galeriestil wird häufig in Fotoanwendungen verwendet. Die Navigation besteht häufig aus Miniaturansichten, um die Bilder in Ihrer Sammlung zu durchsuchen.
Vorteile: Benutzer können sehr einfach durch die Bilder blättern, die sie schnell sehen möchten.
Nachteile: Oftmals beansprucht die Seite mehr Platz als ein Standard-Schieberegler, um das Bild und alle Miniaturansichten anzupassen.
Stellen Sie sich einen Rubik-Würfel vor, der im Web ohne alle Kopfschmerzen aufgebaut ist. Das ist im Grunde ein 3D-Block-Slider - 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 optisch beeindruckendsten Schieberegler. Wenn Besucher es noch nicht gesehen haben, könnten sie den Boden berühren.
Nachteile: Während der Rest der Schieberegler in diesem Tutorial jQuery ist, werden die meisten 3D-Block-Schieberegler in einer Kombination aus Adobe Flash und XML erstellt. Dies ist jedoch nicht das "standardfreundlichste" Format. Diese Schieberegler können etwas mehr Zeit zum "Vorladen" benötigen. Da sie mit Flash erstellt wurden, kann die Installation auch etwas schwieriger sein, wenn Sie mit Flash nicht vertraut sind.
Inspiriert durch den Cover-Flow-Effekt von Apple ist dieser Schieberegler eine beeindruckende Möglichkeit, Ihre Arbeit anzuzeigen. In Verbindung mit einer minimalistischen Website kann sich dieser Slider wie zu Hause fühlen.
Vorteile: Dieser Stil kann für Benutzer eine sehr eindrucksvolle und sehr interaktive Methode sein, um eine Galerie von Bildern zu durchsuchen, in denen Ihre Arbeit gezeigt wird.
Nachteile: Viele haben eine kleine Bildlaufleiste oder verwenden das Scrollrad der Maus oder die Tastatur, um die Bilder anzuzeigen, was bei unabsichtlichem Scrollen etwas unangenehm sein kann.
Der Schieberegler in voller Größe ist wie es scheint - ein Schieberegler, der die gesamte Seite beansprucht, um Ihre Arbeit auf eine Weise zu präsentieren, die Sie nicht übersehen können.
Vorteile: Wenn Sie einen großen Stil haben, werden sie nicht viel größer.
Nachteile: Sie sind möglicherweise etwas schwierig in eine Website zu integrieren, da sie den Bildschirm mit Ihrer Arbeit füllen sollen. Die verwendeten Bilder müssen recht groß sein, um neue hochauflösende Bildschirme zu füllen.
Manchmal befinden Sie sich möglicherweise in einer Situation, in der Sie ein Raster von Bildern anzeigen möchten und ein schnelles Browsen ermöglichen, ohne dass der Benutzer eine zweite oder dritte Seite laden muss.
Einige Schieberegler können mehrere Bilder pro Folie oder mehrere Folien gleichzeitig anzeigen. Überprüfen Sie daher die Funktionsliste. In jCarousel Lite (siehe oben) ist "visible" auf 3 gesetzt, wobei jeweils drei Folien angezeigt werden.
Vorteile: Ermöglicht das gleichzeitige Scrollen mehrerer Elemente, wenn kein großes Bild oder Inhalt erforderlich ist. Ideal für Gruppen von Gegenständen oder wenn Sie den Raum auf der Baustelle haben.
Nachteile: Dieser Stil hat nicht viele Nachteile, außer dass er etwas komplexer einzurichten ist als der Standard-Foto-Schieberegler.
Der Akkordeon-Stil macht das Durchsuchen von Sonderposten etwas wie das Durchblättern von Buchseiten. Hierbei wird ein klassisches Benutzerverhalten "verstecken und enthüllen" verwendet, indem nur ein Ausschnitt des Inhalts angezeigt wird, bevor die gesamte Akkordeonbox herausgezogen wird.
Vorteile: Eine sehr einzigartige und unterhaltsame Art, Ihre Artikel anzuzeigen. Der abgestufte Stil kann helfen, das Ordnungsgefühl zu verstärken, wenn Sie ein Inhaltsparadigma "Schritt 1, Schritt 2, Schritt 3" verwenden.
Nachteile: Nicht ideal für Dutzende von Dias und kann für neue Webbenutzer etwas schwierig sein, versehentlich das Öffnen und Schließen von Objekten mit einem Mausklick auszuführen. Betrachten Sie einen Klick, um die Registerkarte oder Einstellung zu öffnen, falls verfügbar.
Das Gefühl, wenn Sie den großen Schieberegler mit Registerkarten verwenden, 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 korrektem Styling. Wie das Akkordeon zeigt dieser Schieberegler einen Hinweis darauf, was sich in jeder Folie befindet. Dies kann für Besucher hilfreich sein, die bestimmte Informationen suchen.
Nachteile: Möglicherweise müssen Sie die Anzahl der Elemente einschränken, die Sie einschließen möchten, es sei denn, Sie verwenden einen Schieberegler mit Registerkarten wie den iTunes Music Store.
Obwohl die Vielfalt und Anzahl der Schieberegler stetig zunimmt, können Sie manchmal einfach keine Lösung für Ihre einzigartige Situation finden.
Wenn Sie in Ihren Projekten viele Schieberegler verwenden, lohnt es sich, sich die Arbeit anzuschauen und wirklich zu lernen, wie sie funktionieren und selbst einen bauen. Am besten lernt man am Beispiel.
Analysieren 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, Überprüfen der angebotenen Einstellungen und Schreiben auf Ihre eigene Art und Weise.
Mit Tools wie Firebug können Sie einen Schieberegler in Echtzeit "inspizieren", indem Sie zusehen, wie er den Z-Index, die Deckkraft oder die Positionierung ändert, um Inhalte von einer Folie zur nächsten zu verschieben.
Sie erhalten ein besseres Verständnis für die Vorgänge unter der Haube, können Anpassungen vornehmen und Probleme schneller erkennen, indem Sie so viele Schieberegler wie möglich verwenden, um zu erfahren, wie sie funktionieren.
Das einzige, was mehr zur Verfügung steht, als die Anzahl der jQuery-Schieberegler, ist die Anzahl der Websites, die diese anzeigen. Anstatt zu versuchen, alle hier aufzulisten (jede Woche kommen neue heraus!), Gehen wir durch, wie Sie einen finden, der zu Ihnen passt:
Eine schnelle Google-Suche zeigt, dass die Schieberegler an verschiedenen Orten gefunden werden können:
Oft mit dem Titel "25 nützliche jQuery Content Slider-Skripts" betitelt - Beiträge, die erstellt wurden, um die verschiedenen 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.
Websites, die Tutorials zum Erstellen von Schiebereglern anbieten, enthalten oft den endgültigen Quellcode des Projekts, sodass Sie Schritt für Schritt eine Anleitung erhalten, wie das Projekt erstellt wird und das endgültige Arbeitsergebnis. Wenn nicht ausdrücklich angegeben, dient das Quellprojekt nur zu Bildungszwecken. Fragen Sie vor der Verwendung in Projekten.
CodeCanyon bietet eine komplette Kategorie für Premium-Slider. https://codecanyon.net/category/javascript/sliders
Manchmal stoßen Sie auf eine Site mit einem Schieberegler, und Sie möchten sehen, welches Plugin sie verwendet haben. Da JavaScript ein clientseitiges Skript ist, eine Ansichtsquelle der Seite anzeigen und prüfen, welche JavaScript-Dateien importiert werden, sollten die Plugin-Informationen oben im Quellenskript des Plugins mit einer URL enthalten sein, um weitere Informationen zum Plugin zu erhalten und Dokumentation.
Seien Sie höflich, was andere unternommen haben, lesen und befolgen Sie die enthaltenen Lizenzvereinbarungen, und geben Sie an, wo der Kredit fällig ist.
Die Auswahl eines Schiebereglers hängt weitgehend von den benötigten Funktionen und Optionen und dem Gesamtstil ab, für den Sie sich entscheiden. Legen Sie fest, welche Art von Inhalt angezeigt werden soll, wie die Benutzer navigieren sollen und welcher Schieberegler Ihren Anforderungen am besten entspricht.
Wenn Sie Ihre Auswahl eingegrenzt haben, vergleichen Sie die Gesamtgröße des Skripts und prüfen Sie, ob es mit allen Browsern kompatibel ist.
Einige Schieberegler werden in einer "Lite" -Version angeboten, wie z. B. jQuery Cycle Lite, wenn Sie die Gesamtgröße der Datei in Ihrem Projekt gering halten möchten. Oft fehlen in der Light-Version die zusätzlichen Übergangseffekte, wobei die beliebtesten Optionen erhalten bleiben.
Wenn Sie kein jQuery-Master sind, wählen Sie einen Schieberegler mit großartigen Live-Demos, die Sie herunterladen können, und Dokumentation, die Sie bei der Durchführung Ihrer Anpassungen unterstützt.
Die Verwendung eines vorgefertigten Schiebereglers hat zum großen Vorteil, dass die meisten von ihnen unglaublich einfach nach Ihren Wünschen umgestaltet werden können. Dieser Prozess (normalerweise nur als "Skinning" bezeichnet) ist nicht so schwierig, wie es scheinen mag. Normalerweise muss nur eine einfache CSS-Datei bearbeitet werden. Das komplexeste Skinning erhält normalerweise das Austauschen von Grafiken, die Sie als Standardgrafiken erstellt haben (z. B. Hintergründe und Schaltflächen)..
Neben dem Skinning-Schieberegler sollte auch beachtet werden, dass es bei den meisten Schiebereglern leicht ist, die Größe an die von Ihnen gestaltete Website anzupassen.
Das Platzieren eines Schiebereglers in ein vorhandenes Design ist kein Einzelschrittvorgang. Die meisten Schieberegler-Skripts enthalten jedoch eine grundlegende Beispielseite, die den Einstieg in den Import von jQuery, CSS und Beispielinhalt ermöglicht und das Plugin mit den Standardeinstellungen initialisiert.
Lassen Sie uns jQuery Cycle in eine schnelle Beispielseite importieren, die für dieses Tutorial erstellt wurde.
Laden Sie die Vorher- und Nachher-Websites herunter, die folgen sollen.
Die Demo-Site besteht aus grundlegendem HTML, CSS und einem Bild, das den Ausgangspunkt für die Integration des Schiebereglers bildet.
Wir werden das jQuery Cycle-Plugin für diese Demo integrieren.
Importieren Sie die jQuery-Bibliothek und das Cycle-Plugin in
Ihrer Website, indem Sie diesen Code hinzufügen:Das erste Skript sollte die neueste Version von jQuery sein. Sie können es von jquery.com herunterladen oder aus den Google-Bibliotheken laden, wie oben beschrieben.
Das zweite Skript ist die Plugin-Quelle, die wir im Ordner / js / abgelegt haben.
Tauschen Sie das aktuelle, in der Demo-Site verwendete statische sample_water.jpg-Bild gegen eine ungeordnete Liste für Folien aus:
Wir werden nur drei Bilder verwenden, um zu beginnen. Beachten Sie das Attribut. Wir werden dies später verwenden, um unserem Plugin mitzuteilen, dass es sich um den Container unserer Folien handelt. Da die Folien im Wesentlichen nur eine Liste mit verwandten Inhalten sind, ist ein UL-Tag eine gute Wahl.
Unter der ungeordneten Liste der Promos, die wir oben hinzugefügt haben, fügen wir die Navigation hinzu, um die Folien zu steuern. Das Plugin erstellt zur Laufzeit dynamisch die einzelnen Navigationslinks, wenn Sie Folien hinzufügen und aus der Liste entfernen.
Nächste Folie
Die Klasse der nächsten Folienschaltfläche entspricht dem 'nächsten' Parameter, den wir zum manuellen Vorschieben der Folien verwenden werden.
Der Promo-Index wird automatisch generiert, wenn der Parameter "Pager" in den Optionen festgelegt ist. Durch die manuelle Eingabe können wir steuern, wo es auf der Seite angezeigt wird, falls Sie es an einem anderen Ort als dem Plugin haben möchten.
Fügen Sie CSS hinzu, um die Slider-Liste zu gestalten. Einige Schieberegler wie Nivo Slider verfügen über ein benutzerdefiniertes Stylesheet, das Sie herunterladen und loslegen können. Für diese Demo fügen Sie unser benutzerdefiniertes CSS direkt am Ende der Hauptdatei screen.css der Site hinzu.
/ * Entfernen der Listenformatierung von Promo UL / LI * / #promo, #promo li margin: 0; Polsterung: 0; Typ des Listentyps: keine; / * Styles für den optionalen Promo-Navigationscontainer * / #promonav padding: 4px; Hintergrund: #eee; Rand: 1px fest # e0e0e0; Rand oben: 1px; / * Halten Sie die nächste Schaltfläche am rechten Rand. * / #Promonav .next float: right; / * Verknüpfungsstile in der Promo-Navigation * / #promonav a padding: 0 3px; Grenze: 1px fest #eee; Textdekoration: keine; Umriss: 0; Farbe: # 777; / * Stil beim Mouseover von Promo-Navigationslinks * / #promonav a: hover color: # 000; / * Der Index erhält automatisch eine activeSlide-Klasse. Verwenden Sie diese Option, um die aktuelle Folie anzuzeigen. * / #Promoindex a.activeSlide font-weight: bold; Hintergrund: #fff; Rahmenfarbe: #ccc;
Zu diesem Zeitpunkt haben wir jQuery und das Plugin importiert, aber es gibt keine Informationen darüber, welches Element auf der Seite unser Schieberegler ist oder welche Optionen enthalten sind. 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-Skripts, die Sie in importiert haben
Bereich der Website früher im Tutorial.Es ist wichtig, dass Sie jQuery, jQuery Cycle und dann setup.js in genau dieser Reihenfolge importieren. Andernfalls funktioniert das Plugin nicht.
Fügen Sie in setup.js den folgenden Code hinzu:
Accentsconagua
$ (document) .ready (function () $ ('# promo'). cycle (fx: 'scrollHorz', Timeout: 4000, Geschwindigkeit: 800, nächstes: '#promonav .next', pager: '#promoindex ', Höhe: 200, Pause: 1);); Lassen Sie mich erklären, was im obigen Code vor sich geht.
Wir prüfen zunächst, ob das Dokument mit document.ready fertig ist. Andernfalls versucht das Plugin möglicherweise, Elemente auf der Seite zu ändern, die nicht verfügbar oder nicht bereit sind.
Die nächste Zeile teilt dem Cycle-Plugin mit, welches Element wir als Container der Elemente verwenden, die wir durchlaufen möchten. In unserem Fall hat der Container eine Promo-ID, also geben wir #promo ein.
Die von fx bis pause aufgeführten Elemente sind Optionen, die wir an das Plugin übergeben. Wenn wir keine hinzufügen, verwenden Sie einfach: $ ('# promo'). Cycle (); Das Plugin würde seine Standardeinstellungen verwenden. Optionen werden in einer durch Kommas getrennten Liste aufgeführt. Die Anzahl und der Typ der Optionen variieren je nach Plugin. Für jQuery Cycle finden Sie jedoch http://jquery.malsup.com/cycle/options.html
Die Optionen next und pager beziehen sich auf die in Schritt 5 oben erstellte Navigation und können entfernt werden, wenn Sie die Navigation nicht in den Schieberegler einschließen möchten.
Laden Sie die Vorher- und Nachher-Websites herunter, die folgen sollen.
Schieberegler müssen keine großen Foto-Schieberegler sein, die sich über eine Seite Ihrer Website erstrecken. Verwenden Sie sie, um Abschnitte mit rotierenden Inhalten anzuzeigen, wie z. B. Testimonials, Ihre neuesten Tweets oder beliebte Blogartikel in Bereichen der Website, die von dem zusätzlichen Platz profitieren könnten.
Danke fürs Lesen!
