Slidedeck ist ein schickes jQuery Slider-Plugin, das so einige spannende Features und eine schöne Optik zu bieten hat. So kannst du leicht schöne Featured Content- und Bilder-Slider erstellen. Inzwischen gibt es neben einer jQuery-Lite und (kostenpflichtigen) Pro-Version auch ein praktisches WordPress-Plugin. Dieses habe ich einmal genauer unter die Lupe genommen und möchte dir nun zeigen, wie du das Plugin verwendest und wie du deinen Slider mit Hilfe einer eigenen CSS-Skin individuell anpassen kannst.
1. Slidedeck kurz vorgestellt
Auf der Webseite von Slidedeck kannst du dir den jQuery-Slider und die verschiedenen Möglichkeiten der Verwendung genauer anschauen. Ich finde den Slider z.B. sehr geeignet, um spezielle Artikel auf einem Blogs oder die Angebote auf einer Firmenseite zu präsentieren. Hier sind ein paar Webseiten, aus denen du dir den Slidedeck-Slider in Aktion anschauen kannst.
Eine schöne Umsetzung des Sliders kannst du dir bei Q-This anschauen.
Eine individuelle Anpassung des Sliders in der Pro-Version gibt’s bei OpenCandy.
Auf dem Blog Techington siehst du die Standard-Version des WordPress-Featured Content Sliders.
Wie ja bereits erwähnt, gibt es eine Lite- und eine kostenpflichtige Pro-Version des jQuery-Plugins und des Plugins für WordPress. Bei der kostenlosen Lite-Version ist ein kleiner Button von Slidedeck rechts unten am Slider zu sehen.
Der Werbe-Button von Slidedeck ist recht dezent gestaltet.
Hier kannst du die Pro- und Lite Version von Slidedeck miteinander vergleichen.
2. Das Slidedeck Lite WordPress-Plugin
Falls du eine WordPress-Seite hast, kannst du das praktische Slidedeck Lite WordPress-Plugin verwenden. So kannst du deinen Slider bequem im WordPress-Adminbereich einrichten. Dazu benötigst du keine großen Programmierkenntnisse, und es gibt bereits mehrere schöne Style-Versionen zur Auswahl, sowie die Option einen automatisch erstellten Featured Content-Slider für deine Blog-Artikel einzurichten.
Diese 6 verschiedenen Slider-Styles sind beim WordPress-Plugin bereits mit dabei.
Am besten installierst du das WP-Plugin direkt über deinen Admin-Bereich oder vom WordPress.org Plugin-Verzeichnis, da man auf der Slidedeck-Webseite aufgefordert wird, den Newsletter zu bestellen.
Hast du das Plugin installiert gibt es in der kostenlosen Lite-Version zwei unterschiedliche Verwendungsmöglichkeiten. Du kannst den automatischen Featured Content Slider verwenden, um deine neusten, beliebtesten oder Artikel einer bestimmten Kategorie auf deinem Blog anzuzeigen. Dazu wählst du »Add Smart Slide Deck« aus dem Slidedeck-Menü aus. Dabei kannst du die Anzahl der angezeigten Artikel bestimmen, Autoplay aktivieren, und aus zwei verschiedenen Styles (Hell und Dunkel), sowie drei unterschiedlichen Navigations-Stylen wählen.
In der Lite-Version des Plugins hast du allerdings mit dieser Funktion nicht allzu viele Einstellungs-Möglichkeiten. Daher ist die zweite Möglichkeit für die individuelle Anpassung des Sliders besser geeignet.
2.1. Den Slider individuell einrichten
Um deinen eigenen Slidedeck-Slider zu erstellen, gehst du auf »Add New« im Slidedeck-Menü deines Admin-Bereichs. Hier kannst du deine einzelnen Slides, entweder über einen visuellen oder den HTML-Editor mit Inhalt füllen.
Du kannst mehrere Slides anlegen, und z.B. Text, Videos oder Bilder einfügen.
Außerdem kannst du festlegen, welche der Inhalte zuerst geöffnet erscheinen soll, wie schnell die Animation der Slides sein soll, und ob du Loop (der Slider beginnt immer wieder von neuem) oder Autoplay (die Animation startet automatisch) verwenden möchtest.
Den Style deines Sliders kannst du in der Sidebar des Slider-Adminbereichs unter »Skin« anpassen. In dein Theme einfügen kannst du deinen Slider entweder, indem du in über den Adminbereich direkt in einen Artikel einsetzt, oder (falls du den Slider z.B. auf deiner Blogstartseite anzeigen möchtest) indem du den Code-Schnipsel in der Admin-Sidebar in dein Theme-Template (z.B. in die index.php Datei) einfügst.
Den Codeschnipsel für deinen Slider kannst du direkt in deine Theme-Datei einfügen.
2.2. Eine eigene CSS-Vorlage für deinen Slider erstellen
Eine tolle Möglichkeit, um den Slider optisch an deine Webseite anzupassen ist die Option, eine eigene CSS-Skin für deinen Slider zu erstellen. Dazu rufst du mit einen FTP-Programm den Slidedeck Plugin-Ordner unter wp-content/plugins auf. Hier findest du den Ordern »Skins«. Am einfachsten hast du es, wenn du einen der bereits vorhandenen Skin-Order herunterlädst, und deinen eigenen Style nach diesem Vorbild aufbaust.
Ich habe als Beispiel eine eigene Skin nach Vorlage des Voyager-Templates erstellt.
So sieht mein individuelles Skin-Design des Slidedeck-Sliders aus.
Wichtig ist, dass du die Angaben in der skin.css Datei genau übernimmst. Ich habe meine Skin »color« genannt, und daher alle CSS-Styles mit dem Vorwort color umbenannt. Auch die Details in der Beschreibung der CSS-Datei ganz oben habe ich angepasst. Anschließend erstellt du deine eigenen Slider-Images. Corner, falls du einen kleinen Pfeil anzeigen willst, slides falls du ein Image für den Hintergrund deiner Slides verwenden möchtest, und spines für die Slider-Elemente. Auch hier ist es wieder sehr hilfreich, wenn du dir als Vorlage die Images der anderen Skins genau anschaust.
Anschließend erstellt du einen neuen Ordner mit dem Namen deiner Slider-Skin (z.B. color), und lädst diese ebenfalls in den Skin-Ordner des Plugins hinein.
Jetzt kannst du in den Einstellungen deines Sliders unter »Choose Skin« deine neu erstellte Skin auswählen und den Slider updaten.
Wähle deine eigene Skin aus dem Dropdown-Menü aus.
So einfach kannst du also deinen Slidedeck-Slider individuell gestalten. Falls du dir die Ordnerdateien noch einmal genau anschauen möchtest, kannst du dir meine Slider-Vorlage hier herunterladen.
Eine schöne Zusammenstellung weitere Silder-Optionen für WordPress findest du auch auf dem Speckboy-Blog.
Wie gefällt dir der Slidedeck-Slider? Hast du noch Fragen zum Plugin oder kennst du weitere schöne Slider, die die für WordPress-Webseiten geeignet sind? Über dein Feedback und deine Slider-Favoriten Tipps freue ich mich sehr!
Wow. Das ist ja super. Das werd ich gleich mal auf meiner Seite anpassen.
Danke. TopPost!
@pixakt: Vielen herzlichen Dank für dein Feedback. Finde ich klasse, dass dir Slidedeck und die Beschreibung gefällt, und du den Slider gleich ausprobieren möchtest :-)
Viele Grüße,
Ellen
Thanks for the wonderful post Ellen!
Your explanation of how you can customize SlideDeck is much better than ours!
We would be happy to include your skin and any others that you design in our upcoming community skin directory. Just let us know!
Hi Chuck,
thanks so much for your feedback on the post. I am happy that you liked it and the skin i designed. It helped me a lot to learn more about customizing Slidedeck. Of course I would be happy if you would include my skin in your directory and I’m sure we will design some more, too :-)
Oh, and I really like the WordPress Plugin a lot, you guys did a great job there :-)
Best regards,
Ellen
Thanks Ellen!
We are honored that you like SlideDeck. I will send you an email about including your skin and others on our website.
Best,
Chuck
Super! Slidedeck habe ich irgendwann schon mal angeklickt, aber wohl aus den Augen verloren. Hatte ich gar nicht mehr auf dem Zetteln
Danke für die schöne Erklärung.
Hallo Lennart,
vielen herzlichen Dank für dein Feedback. Es freut mich sehr, dass dir die Erklärung gefallen hat :-)
Ja, ich hatte Slidedeck auch schon einmal vor einem Weilchen angeschaut, bin aber auch erst jetzt dazu gekommen es mal richtig auszuprobieren. Vor allem das Lite WordPress-Plugin finde ich es klasse, da kann man wirklich einiges mit anstellen :-)
Viele Grüße,
Ellen
Slide Deck hört sich für mich nach einem wirklich tollen Plug In an, ich weiss nur nicht, ob es wohl in meinen Blog passen würde…hm. Kommt wohl auf einen Versuch an :)
@Seelendieb: Vielen herzlichen Dank für dein Feedback. Ja, ich finde das WordPress-Plugin auch super umfangreich, und so kann man den Slider auch recht leicht anpassen. Probiere es doch einfach mal aus :-)
Viele Grüße,
Ellen
Hi Ellen, ich bin immer wieder begeistert über dein Blog - abgesehen davon, dass es auf nofollow läuft ;-) - Aber inhaltlich: Ganz (!) große (!) Klasse!
Habt ihr mal ausprobiert, was dieses schicke Slideer-Plugin mit der Performance des Blogs macht? Ich möchte gern wieder einen Slider einbauen, hab den bisherigen aber abgeschaltet, weil die Ladezeiten enorm beeinträchtigt wurden.
Viele Grüße
Elke
Hallo Elke,
vielen herzlichen Dank für dein tolles Feedback. Es freut mich riesig, das dir der Blog und die Themen so gut gefallen :-)
Bzgl. der Performance kommt es natürlich auch darauf an, was der Inhalt des Sliders ist. Videos, Bilder etc. sind natürlich speicherintensiver. Meiner Meinung nach, sollte ein Slider mit 3-5 Slides aber kein Problem sein. Auf der Slidedeck-Webseite findest du auch ein paar Live-Slider, bei denen du die Ladezeiten testen kannst :-)
Viele Grüße,
Ellen
Hey Ellen,
ich habe Slidedeck jetzt mal ausprobiert, hat auch alles wunderbar funktioniert. Allerdings wenn ich eine andere Höhe haben wollte als die 300 px, die da voreingestellt waren, hat sich nichts verändert. Es war egal, was für eine Zahl ich da eingegeben habe. Woran könnte das liegen? Hast Du einen Tipp? Ich hoffe, es ist ok, wenn ich Dich frage, aber Du scheinst mir ja ziemlich kompetent zu sein, wenn es um solche Dinge geht :)
@Seelendieb: Mhh, hast du deinen Slider über den Code-Schnipsel in dein Theme eingefügt? Dann müsstest du die Zahl der Höhe auch noch einmal im Code direkt anpassen (die letze Zahl). Ansonsten bin ich mir auch nicht sicher, woran das liegen könnte. Hoffe der Tipp hilft dir weiter, ansonsten sag einfach noch einmal bescheid :-)
Liebe Grüße,
Ellen
Ja, ich habs über den Schnipsel eingefügt und auch im Editor von WordPress selbst verändert. Oder gibts noch eine andere Stelle, wo ich das verändern muss?
@Seelendieb: Das ist ja komisch, eigentlich sollte es so funktionieren. Ich werde es nochmal auf meinem Test-Blog ausprobieren, und dir dann noch einmal bescheid geben, ja!
Gruß,
Ellen
Hey Ellen,
ich danke Dir für Deinen Einsatz :) Ich werde selber auch nochmal gucken und googeln, wo der Fehler liegen könnte.
Hallo Ellen, danke für die hilfreichen Tipps im Umgang mit Slidedeck (das ich auf meinem Blog zur Zeit am Einrichten bin). Anbei aber auch nochmal ein dickes Lob für dein Blog-Layout! Einfach nur: WOW! Ich habe lange nicht mehr so ein perfektes und gut durchdachtes Blog-Layout gesehen. Da kann man echt nur neidisch werden! ;)
lg,
Torsten
Hallo Thorsten,
vielen herzlichen Dank für deinen Kommentar und dein tolles Feedback. Es freut mich riesig, dass dir unser Blog-Layout so gut gefällt :-)
Und ganz viel Spaß und Erfolg beim Einrichten deines Sliders :-)
Viele Grüße,
Ellen
Hey Ellen, ich habe das Problem mit der Größe gelöst bzw. hat es sich nach einem update von alleine gelöst :) Ich habe Slide Deck auf meinem Blog nun auch im Einsatz, vielleicht magst Du ja mal vorbeischauen. Danke für Deine Unterstützung :)
@Seelendieb: Super, da bin ich ja froh, dass du das Problem lösen konntest! Ich habe mir deinen Slider gerade angeschaut, sieht ja echt klasse aus :-)
Viele Grüße, und einen schönen Sonntag,
Ellen
Hey Ellen,
ich finde den Slider und vor allem Deine Vorstellung super.
Allerdings habe ich ne Frage.
Ich würde gerne default einen Slider mit 800×600 px einbauen, egal ob ich 3 oder N Slides habe.
Nehmen wir an das Bild, dass da drin liegt ist 700×500 px und zentriert.
Bei 3 slides sitzt das Bild mittig und es wird nicht durch die rechten slides verdeckt.
Wenn ich jetzt aber 5 slides habe, dann hängt das Bild hinter dem / den slide/s, welche rechts hängen.
hast Du ne Idee, wie man das flicken kann, ohne die Bildgröße jedes mal von der Zahl der Slides abhängig zu machen?
merci vielmals,
Luke
Hallo Luke,
vielen Dank für deinen Kommentar und deine Frage. Mhh, du hast Recht, dass ist ein wenig problematisch. Ich werde auf meinem Test-Slider einmal ausprobieren, ob man die Bilder-Größe auch automatisch anpassen. Ich sage dir bescheid, sobald ich eine Lösung gefunden habe, ja. Eine gute Idee wäre es bestimmt auch, deine Frage in das ganz neue Slidedeck-Forum zu posten, eventuell weiss dort jemand bereits eine Lösung :-)
Beste Grüße,
Ellen
Hallo.
Habe es gerade versucht Slide Deck zu installieren. Leider funktioniert das anscheinende deswegen nicht, weil auf meinem Server php 4 und 5 läuft.
Kann mir jemand sagen wie ich SlideDeck trotzdem zum laufen bekomme???
Gruß
C.K.
Hallo Ellen,
ein wirklich toller Slider und toll erklärt. Deswegen bist du einer unserer Web Snippet.
Viele Grüße Mika
Hallo Mika,
vielen Dank für deinen Kommentar. Es freut mich, dass dir die Beschreibung zum Slider so gut gefällt :-)
Viele Grüße,
Ellen
funktioniert dieser slider nur bei wordpress oder auch bei anderen homepages, z.b. pytalhost?
Hallo Anni,
nein, ohne das WordPress-Plugin ist es zwar ein bisschen schwieriger, den Slider auf der eigenen Webseite ein zu bauen, aber es geht. Dazu benötigst du dann die Nur-JavaScript-Version von Slidedeck. Die Lite-Version kannst du dir auf der Slidedeck-Webseite kostenlos herunterladen und auf deiner Webseite integrieren. Eine Anleitung dazu findest du in der Dokumentation von Slidedeck ebenfalls auf der Webseite :-)
Viel Erfolg und viele Grüße,
Ellen
Hallo Ellen,
zuerst einmal muss ich sagen dass dies nach langem suchen mit Abstand die beste Beschreibung zum SlideDeck Plugin ist. Vielen Dank dafür.
Ich habe jedoch leider ein Problem. Ein SlideDeck in einen Artikel einzufügen bekomme ich ohne Probleme hin.
Ich würde aber viel lieber im Twenty Ten Template das Kopfzeilenbild durch SlideDeck ersetzen. Sprich, ich möchte kein statisches Bild dort haben sondern die Highlights meiner Artikel. So wie hier zu in Screenshot 6 zu sehen:
http://wordpress.org/extend/plugins/slidedeck-lite-for-wordpress/screenshots/
Kannst du mir verraten wie das funktioniert? Das wäre großartig.
Vielen Dank und Schöne Grüße,
Björn
Moin,
wie würde der Einbau den bei Yoko aussehen. Ich bekomme es tatsächlich nicht hin.
Müsste da nicht auch ein »if function exists« den Sleider aufrufen.
Dann auch in der index.php ?
Also nur ›100%‹, ›height‹ => ›370px‹ ) ); geht bei mir nicht.
Vielleicht hat ja jemand Lust seinen Code zu posten.
Danke
Kosta
Huhu,
danke für die Erklärung,
aber es wäre noch schöner, wenn es das Plugin noch geben würde :(
Wollte es verwenden und habe nun gesehen, dass der Slider nicht mehr angeboten wird. Wird verkauft oder so…
Super, super schade.
Aber vielleicht wäre ein Vermerk hier gut?
Lieben Gruß
Petra