Wir waren schon ein paar Mal auf dem jQuery "Slider"-Pfad. Einmal für den Auto-Playing Featured Content Slider und wieder für den Start/Stop-Slider.
Viele der in diesen Tutorials vorgestellten Konzepte sind bei diesem Slider dieselben, daher werde ich Ihnen dieses Mal nicht viel Quellcode anbieten. Der große Unterschied hier ist, dass es Schaltflächen zum Ändern von Panels und die Panels zoomen ein und aus. Spaß!
Demo ansehen Dateien herunterladen
AKTUALISIERT 16. Feb 2009
- Problem mit Doppelklick behoben. Die nächste Animation kann erst gestartet werden, wenn die aktuelle Animation abgeschlossen ist.
AKTUALISIERT 17. Feb 2009 (Noah Hendrix)
- Tastaturunterstützung hinzugefügt, Pfeiltasten, Leertaste und Eingabetaste
- Code aufgeräumt, Anzahl der Panels und anfängliche Breiten/Größen sind nicht mehr fest kodiert, daher einfacher zu erweitern
- Klicken auf nicht aktive linke oder rechte Panels löst ebenfalls Animation aus
AKTUALISIERT 15. Juli 2010
Nach GitHub verschoben- In ein tatsächliches Plugin mit mehr Funktionen verwandelt
AKTUALISIERT 17. Aug 2012
- Jetzt in der CSS-Tricks Organisation auf GitHub.
Schönes Plugin, ich werde dafür wahrscheinlich eine Verwendung finden…
Eine Sache, die mir aufgefallen ist: Wenn man zweimal auf den nächsten/vorherigen Button klickt, bringt das alles durcheinander. Vielleicht deaktivieren Sie sie und reaktivieren sie mit dem Animations-Callback. Ansonsten sehr cool, machen Sie weiter so!
FF 3.06 auf OSX 10.5.6 übrigens.
Ich bemerke auch, dass nach dem Erreichen des Endes und dem Klicken auf "Zurück" die Boxen nicht mehr zentriert sind. Sie sind leicht nach rechts ausgerichtet.
Ich werde versuchen, es im Laufe der Zeit zu verbessern, aber wenn Sie Leute da reinhüpfen und Sachen reparieren wollen, schicken Sie mir gerne aktualisierten Code und ich kann das Beispiel aktualisieren und Ihnen die Anerkennung geben.
Die erste Korrektur ist, dass es "short" statt "shot" ist, glaube ich. Das ist im Beispiel – der Text unter den Bildern.
Danke Chris – gute Arbeit!
Übrigens, die Bilder handeln alle von Wäschegeräten.
danke
Checken Sie das in GitHub ein, damit wir alle darauf aufbauen können.
Ich liebe es! Ich kann es kaum erwarten, es auszuprobieren. Danke!
Wenn man schnell auf die Pfeile klickt (doppelklickt), dehnt sich der Container auf seltsame Weise sehr weit nach unten aus.
Aber ein gut aussehendes Stück Code, ich würde es definitiv gerne in einem meiner zukünftigen Projekte verwenden :)
Hey, sehr schön… aber wie Noah schon sagte, es wird unordentlich, wenn man doppelt klickt :)
Okay, okay, okay. Ich habe das Problem mit dem Doppelklick behoben.
Mann, seid ihr wählerisch.
scherzhaft :)
Viel besser! :)
Das ist wirklich schön! Ich werde es bald ausprobieren. Ist Auto-Play eingebaut?
Guter Trick Chris. Vielen Dank.
Das ist großartig. Ich denke, wenn die Boxen die gleiche Breite und Höhe hätten, würde es besser aussehen.
Danke! Habe zuletzt mit easyslider herumgespielt, aber das hier ist viel schöner. Ich werde damit Spaß haben.
Sieht großartig aus. Es wäre noch besser, wenn es eine Option gäbe, die Boxen bei einer Größe zu belassen.
Sehr sauber, ich mag es. Ein weiteres für meine Werkzeugkiste. Danke.
Danke, dass Sie immer coole Themen und Ressourcen bereitstellen. :)
Sehr gut! Gut gemacht Chris
Gibt es eine festgelegte Vorgehensweise, wenn man das Fenster und die Bilder größer haben möchte?
So ein nützliches Plugin. Aber wie können wir ein animiertes Banner mit jQuery erstellen?
Ja, ich bin auch daran interessiert, wie ich das Fenster und die Bilder größer machen könnte.
Sie müssen bearbeiten
style.css
.scrollContainer div.panel
.inside img
slider.js
Ändern Sie die Größen und Sie sollten fertig sein
Oh Gott, ihr werdet mich wahrscheinlich erschießen, wenn ich frage, und ich entschuldige mich im Voraus, aber kann das zu einer iweb(08)-erstellten Website hinzugefügt werden?
Wo finde ich Anweisungen dafür?
Danke!
Ich wollte schon immer wissen, wie man das hauptsächlich mit Java macht. Solche Dinge habe ich in Flash oder Flex gemacht. Es ist sehr interessant zu sehen, wie sich das in einem anderen Umfang entwickelt. Gute Arbeit
wow! Ich fange jetzt an, es zu benutzen! danke :-)
Fantastische Sachen – vielen Dank fürs Teilen. Gibt es eine Möglichkeit, es automatisch beim ersten Bild zu starten, oder bin ich zu dumm? ;-)
Sieht super aus!
Meiner Meinung nach wäre es noch besser, wenn das gezoomte Panel auf einen Lightbox-Effekt reagieren würde (jede Kopie ist ausreichend, ich bin sicher, Sie werden ein jQuery-Plugin finden), um das Bild in seiner ganzen Pracht zu zeigen… Vielleicht sogar ein halbtransparentes Zoom-Symbol „beim Hovern“ anzeigen, um dies anzuzeigen?
Ja, ich habe genau dasselbe gedacht… gute Idee
Das ist sehr elegant. Es erinnert mich an CoverFlow, aber ohne den kaskadierenden Effekt. Ich habe die Dokumentation oder irgendetwas anderes nicht angeschaut, aber das wäre cool, wenn es sich von selbst und mit den Pfeilen bewegen würde.
Gute Sachen Chris. Ich liebe es.
Du bist ein Genie. Ich habe versucht, genau dasselbe zu tun, aber nach ein paar Versuchen aufgegeben.
Sieht gut aus, Chris! Die Animation ist auf meinem Rechner etwas langsam/stotternd… aber das Ergebnis ist dasselbe.
Außerdem, „Ein sehr kurzer Auszug kommt hierher…“ hehe, ich liebe Tippfehler ;)
netter Effekt, ich werde ihn für meinen Blog übersetzen.
Salud!
Versuche, es zum Laufen zu bringen, aber mit unterschiedlichen Bildgrößen
Können Sie mir sagen, was ich falsch mache?
Sliderbreite ist 749 statt 800 und Bildgröße ist 442 statt 326
Die Mathematik ist ein wenig verwirrend.
http://www.wadedesigngroup.com/NC/
Bester Slider bisher. Arbeite daran, ihn für die bessere Arbeit mit vertikalen und horizontalen Bildern zu aktualisieren.
Hallo Chris,
Vielen Dank für dieses großartige Stück Code!
Aber könnten Sie erklären, wie man die Größe der gesamten Box und der darin enthaltenen Bilder ändert?
Grüße aus Deutschland
@toffifee
Sie müssen das CSS bearbeiten (du musst im CSS rumbasteln)
Ändern Sie die Breite von „#wrapper“ (die Weite verändern, um die Breite des Scrollcontainers anzupassen)
und die Höhe von „.scrollContainer div.panel“ (das ist die Höhe des Scrollcontainers)
und zuletzt „.inside img“, das für die kleineren Bilder ist, die gerade nicht ausgewählt sind (auch die Größe der kleinen Bilder die links und rechts vom ausgewählten Bild angezeigt werden)
Sie müssen auch die Werte im Skript ändern
var movingDistance = 60; (dies ist dafür, wie weit die Bilder verschoben werden – auch wie weit die Bilder verschoben werden)
var curWidth = 70;
var curImgWidth = 70; (diese beiden sind für die Bilder, die aktuell vergrößert dargestellt werden.)
leckeres Slider gibt es zwei Stellen, die immer mit CSS-Arbeiten überraschen
Sie (natürlich) und http://www.cssglobe.com.
Danke Chris, dass Sie Ihr Wissen mit uns teilen.
Hallo!
Tolle Arbeit! Das ist fantastisch.
Wäre es möglich, permanente Links zu jedem Panel zu erstellen, zusätzlich zu den vorherigen und nächsten Schaltflächen?
Ausgezeichnet, es sieht sehr sehr gut aus.
Tolles Plugin, vielen Dank für Ihre Arbeit.
Es scheint, dass es in IE6 einen kleinen Fehler gibt, left-shadow und right-shadow strecken sich nicht über die gesamte Höhe des Divs.
Ich habe versucht, es selbst zu beheben, aber erfolglos.
Ich habe es behoben, geben Sie einfach eine Höhe (400px oder höher) für #left-shadow und #right-shadow an, und der Schatten erstreckt sich schön.
Kann das irgendwie in Blogger verwendet werden? Jede Hilfe dort wäre großartig!
Wow, was für ein tolles Plugin! Gibt es eine Möglichkeit, Links zu erstellen, die mit einzelnen Boxen „verlinkt“ sind?
Das ist herausragend. Weiß jemand, wie man den Code in einem WordPress-Theme verwendet?
Keine Sorge mehr. Anfangs hatte ich Probleme mit dem Slider-Effekt, aber das slider.js-Skript war über jquery.js gelistet. Nachdem ich die Reihenfolge geändert hatte, funktionierte alles einwandfrei.
Hallo, ich gestalte gerade meine Portfolio-Website mit WordPress und möchte die beweglichen Boxen als Teil der Portfolio-Seite verwenden.
Wie ist es möglich, bewegliche Boxen zu einer Seite hinzuzufügen, die in WordPress erstellt wurde?
Können Sie erklären, wie Sie das gemacht haben?
Ich hoffe, eine Moving Boxes-Oberfläche zu einer Seite mit 15 Einträgen hinzuzufügen und würde gerne eine "Wrap"-Funktion hinzufügen, damit ich von der äußersten linken Seite aus (immer noch) die linke Schaltfläche drücken könnte, um zur äußersten rechten Seite zu gelangen. Ich weiß, dass der Coda-Slider das kann. Wäre es schwierig, das als Option für diese Lösung hinzuzufügen?
Ich versuche, das auf einer Website zu verwenden, aber ich brauche 12 Panels, nicht nur 5. Ich durchsuche die JS-Datei und das CSS und kann nicht herausfinden, welchen Wert ich ändern muss, um mein Ziel zu erreichen.
Danke,
Es ist nicht sehr schön mit IE 8 und mit IE 7 sind die Tastenkombinationen nicht funktionsfähig.
Das ist großartig!
Wie mache ich es zentriert? Es ist ein wenig nach rechts verschoben, ich habe alles versucht, was ich weiß!
Hallo Fonda
Ich bin kein jQuery-Spezialist. Aber soweit ich sehen kann, müssen Sie eine Einstellung in der JS-Datei (die Slider-Datei) ändern. Wenn Sie im selben Boot sitzen wie ich und es in einem WordPress-Theme verwenden möchten und die Breite usw. bearbeiten müssen, wird das "Zentrieren" etwas abweichen. Bearbeiten Sie also dies >
**var movingDistance = 400;**
Bearbeiten Sie dies sorgfältig :-)
Tolle Arbeit Chris! Danke für die E-Mail –
eigentlich. bei Überprüfung. Ich lag oben falsch. Ändern Sie das nicht.
$container
.css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
**.css('left', "-450px");**
Bearbeiten Sie das $container .css-Element dort.
Danke Gerry.. ich habe es versucht – hat nicht funktioniert : (
aber ich habe es herausgefunden.. es gibt eine gesetzte Breiten-Eigenschaft, die aus dem .scroll entfernt werden muss und so aussehen sollte
.scroll {
overflow: hidden;
margin: 0 auto;
position: relative;
}
Hallo Leute!
tolles Skript!
Nichtsdestotrotz habe ich ein Problem, nur IE 7 generiert die Seite fehlerfrei. FF und Opera machen Probleme, sobald ich auf den linken oder rechten Pfeil klicke.
Irgendeine Idee? dev.schuelerpoint.de
Danke!
Weiß jemand, wie man den Hintergrund des Containers weiß einstellt, da er transparent ist und mein Hintergrundbild durchscheint.
Danke!
Hallo, tolle Arbeit, das könnte der perfekte Slider für ein Bildtagebuch sein, aber wie startet man ihn beim ersten Bild statt beim dritten? Danke fürs Teilen!
Das mag seltsam klingen, aber ich weiß nicht, wie ich es anders sagen soll. Ich glaube, ich liebe dich!
Die vorherige Frage von sesamosaurus wurde vielleicht privat beantwortet, aber ich frage mich auch, ob es möglich ist, dass der Slider beim ersten Bild statt beim dritten startet. Irgendwelche Ideen? (Übrigens… ich liebe dieses Plugin!)
Hallo, dieser Slider ist genau das, was ich schon lange gesucht habe und sieht großartig aus. Tolle Sachen…
Aber ich habe ein Problem bei der Integration des Codes in ein WordPress-Theme, ich frage mich, ob mir jemand helfen kann, der Slider-Effekt funktioniert bei mir überhaupt nicht, ich bin neu bei JQUERY und versuche zu troubleshooten… aber ohne Erfolg. :(
Okay, irgendwie habe ich es zum Laufen gebracht, nachdem ich stundenlang auf meinen Bildschirm gestarrt und mir den Kopf zerbrochen habe! Es ist ein Konflikt mit einem anderen jQuery-Skript, das automatisch mit einem WordPress-Plugin installiert wurde, wer hätte das gedacht. Es ist so einfach, es zu beheben, indem man es nach . Ich bin so glücklich, dass alles jetzt funktioniert und der Slider perfekt ist!! Danke.
Ich schätze, niemand hat eine Idee für eine schnelle Möglichkeit, mehrere Instanzen davon auf derselben Seite zu haben? Abgesehen von 2 verschiedenen Includes und einer Menge Klassenverdoppelung.
Hallo Leute.. Kann mir jemand bei diesem Problem helfen… Die Box zeigt zuerst ein leeres Panel an und skaliert die Panels falsch. Wie entferne ich die Skalierung und zeige zuerst Panel 1 an (ohne das leere Panel, das erscheint).
++++++++++
Link zum Problem ++++++++++++
Vielen Dank im Voraus!..
David Vera
Das ist wirklich gut.
Ich fange mit Webdesign an und mag es immer mehr… werde es definitiv benutzen.
Wirklich, das ist eine sehr coole Seite mit schönen Tipps und Dingen zum Benutzen. Vielen Dank dafür!
Hallo,
Das ist ein sehr schönes Plugin. Ich möchte kleinere Bilder anstelle der im Demo verwendeten Bilder verwenden. Ist die Bildgröße im Code fest kodiert? Ich kann es nicht herausfinden.
Bitte helfen Sie.
Ich hoffe, das ist nicht verwirrend, aber ich habe festgestellt, dass, wenn man auf den "rechten Pfeil" klickt, das kleinere linke Bild verschoben wird oder jedes Mal ein wenig nach links verrutscht, während das eingehende rechte kleinere Bild ebenfalls ein wenig nach links verschoben wird. Je mehr Bilder/Panels man hinzufügt, desto mehr verschiebt/schneidet es sich. Das angeblich "zentrierte" große Bild ist nicht immer zentriert..
Irgendwelche Vorschläge?
danke
eine weitere Anmerkung
nur in IE. Wenn die Seite geladen wird, flackert das gesamte Bild vertikal, dann geht es in die richtige Ansicht.
/seufz
Ich habe festgestellt, dass die linken und rechten Tasten in IE nicht gut funktionierten.
schwierig zu implementieren :(
Bitte sagen Sie die am besten geeignete und passendste Option für Bilder mit höherer Auflösung (600-700px Breite)?
Feine Arbeit!
Entschuldigung, aber wie erstelle ich meine eigene Implementierung davon? Ich habe das gerade über Google gefunden.
Ich wünschte, es gäbe Anleitungen… wissen Sie, für die kleinen Leute.
Hallo,
tolles Skript!
Gleiche Frage wie Andrea: Ist es möglich, dass der Slider beim ersten Bild statt beim dritten startet?
Vielen Dank
Thierry
sehr schön, danke! und der Code ist sehr einfach
Ich habe eine Version dieses Skripts auf der Startseite der EServer TC Library (http://tc.eserver.org/) eingerichtet, aber ich habe unser slider.js JavaScript angepasst, um bei jedem Laden der Seite zufällig zu einem der fünfzehn Panels auf meiner Website zu scrollen. Schauen Sie sich meine slider.js-Datei (http://tc.eserver.org/js/slider.js) an, wenn Sie verwenden möchten, was ich für Ihre Implementierung gemacht habe.
Schöne Implementierung! Danke fürs Teilen.
Tolles Skript! Schöne Implementierung! Danke fürs Teilen. Ich möchte dieses Skript zukünftig auf meiner Website ausprobieren.
Webdesign-Unternehmen
Hallo, danke. Ich habe Ihr Moving in meiner Website verwendet. Es ist wirklich attraktiv.
http://www.ajaxmoon.net
Fantastisches Stück jQuery, einfache 'aber perfekte' Animation, danke Chris, gut gemacht,
elegant und schnittig. tolles Skript
Vielen Dank.
T.
Weiß jemand, wie man ein bestimmtes Bild fokussiert, wenn die Seite geladen wird? Ich habe eine Reihe von sequenziellen Bildern, die auf der linken Seite mit 1 beginnen.
Tolle Seite übrigens
Gibt es eine Möglichkeit, diese URL #&slider1=5 zu entfernen?
Ich habe dieses Plugin in meinem Projekt verwendet. Aber ich habe ein Problem mit der Höhe des ersten Elements in der Liste. Immer wenn das erste Element aktiviert wird, verringert sich die Höhe des Abschnitts und schneidet ein Viertel meines Bildes von unten ab.
Hallo Chris Coyier, ich verfolge Ihre Website immer wegen CSS-jQuery-Tricks.
Dieses Mal suche ich nach einem ähnlichen Slider in diesem Chrome Web Store (im Bereich "Empfohlen" oben im Chrome Web Store), konnte aber keine Lösung finden… Bitte helfen Sie!
https://chrome.google.com/webstore/category/apps?hl=en-US&utm_source=chrome-ntp-launcher
Hallo Chris, hallo alle,
Ich liebe Moving Boxes, aber das einzige Problem ist, dass sie sich nach einem Fenster-Resize nicht automatisch anpassen. Ich muss den Browser manuell aktualisieren, um die richtigen Größen zu erhalten. Gibt es eine Umgehungslösung dafür?
Vielen Dank für das Plugin selbst!