AnythingSlider jQuery Plugin

Die Welt braucht noch einen jQuery-Slider. GÄHN. Ich weiß, aber schaut euch diesen hier an, er hat viele coole Funktionen.

Hier auf CSS-Tricks habe ich eine Reihe verschiedener Slider erstellt. Drei, um genau zu sein. Einen "featured content" Slider, einen "start/stop slider" und "moving boxes". Jeder hatte eine coole interessante Funktion, die ich zu der Zeit brauchte. Alle wurden gut aufgenommen, aber wie bei solchen Dingen wollen die Leute, dass sie zusätzlich zu dem, was sie bereits tun, auch X, Y und Z können.

Dieser neue AnythingSlider ist der Versuch, die Funktionalität all dieser vorherigen Slider zu vereinen und neue Funktionen hinzuzufügen. Mit anderen Worten, einen wirklich "voll ausgestatteten" Slider zu erstellen, der weit verbreitet nützlich sein könnte. Dies ist das erste Mal (auf CSS-Tricks), dass einer dieser Slider auch ein echtes Plugin ist, was die Implementierung und Anpassung erheblich erleichtern sollte.

 

Demo ansehen   Dateien herunterladen

Die Demoseite enthält die aktuelle Version, vollständige Nutzungshinweise und ein aktuelles Changelog.

Funktionen

• Slides sind HTML-Inhalte (können alles sein)
• Pfeile für nächsten/vorherigen Slide
• Navigations-Tabs werden dynamisch erstellt und hinzugefügt (beliebige Anzahl von Slides)
• Optionale benutzerdefinierte Funktion zur Formatierung des Navigationstextes
• Automatisches Abspielen (optionale Funktion, kann gestartet oder gestoppt werden)
• Jeder Slide hat einen Hashtag (kann direkt auf bestimmte Slides verlinken)
• Unendliches/kontinuierliches Sliden (gleitet immer in die Richtung, in die Sie sich bewegen, auch beim "letzten" Slide)
• Mehrere Slider pro Seite zulässig (Hashtags funktionieren nur beim ersten)
• Pausiert das automatische Abspielen beim Überfahren mit der Maus (Option)
• Link zu bestimmten Slides über statische Textlinks
• ....und.... ...wartet darauf.... mehr!

Anpassung

Slides hinzufügen/entfernen

Fügen Sie einfach weitere `<li>-Elemente zur Liste innerhalb von `<div class="wrapper">` hinzu oder entfernen Sie sie, alles andere geschieht automatisch.

Größe anpassen

Wenn Sie beispielsweise die Slides von 680px auf 580px Breite ändern möchten, müssen Sie nur etwas CSS ändern. Ändern Sie diewidthvon `.anythingSlider ul li` auf 580px, ändern Sie diewidthvon `.anythingSlider .wrapper` auf 580px und reduzieren Sie diewidthvon `.anythingSlider` 100px auf 660px.

Direktes Verlinken von statischen Links zu Slides

Zielen Sie auf den Link mit einer ID oder einer Klasse (oder was auch immer) und wenden Sie einen Click-Handler an. Rufen Sie dann die Plugin-Funktion auf und übergeben Sie ihr die Nummer des Slides, auf den Sie verlinken möchten

$("#slide-jump").click(function(e){
    $('.anythingSlider').anythingSlider(6);
    e.preventDefault();
});

Danksagungen

Er wurde von mir geschrieben, mit Code, der aus einigen von Remy Sharps Slidern und meinen eigenen früheren Slidern zusammengewürfelt wurde. Doug Neiner hat geholfen, ihn effizienter und intelligenter zu machen und einige Fehler zu beheben.