Javascript Page Slider Roundup

„Page Sliders“ sind ein bisschen wie Tabbed Boxes, nur dass der Inhalt zu vorbeigleiten scheint, anstatt sofort ersetzt zu werden. Dies ist ein ziemlich netter Effekt und kann, genau wie bei Tabbed Boxes, helfen, viele Inhalte auf einer einzigen Seite unterzubringen, ohne visuelles Durcheinander zu riskieren. Es gibt eine Reihe von Techniken und Frameworks zur Erstellung dieser Page Slider. Hier ist eine Zusammenfassung einiger, die ich gefunden und verwendet habe.

Coda Slider

Niall Doherty’s Coda Slider wurde (und benannt) zu Ehren des sehr guten Page Sliders auf der Produktseite der Coda Software von Panic erstellt. Es gibt ein herunterladbares Beispiel, einschließlich des erforderlichen jQuery. Ich liebe Coda Slider. Er bietet viele großartige Navigationsfunktionen, neben den obligatorischen Pfeilen an beiden Seiten, wie Tabs mit eindeutigen Klassen und interne Navigation. Das Beispiel ist ziemlich karg, was es Ihnen ermöglicht, schnell mit dem Design drumherum zu beginnen. Vielleicht ist seine beste Funktion sind eindeutige URLs. Mit ID-basierter Navigation (#location) können Sie direkt zu Seiten innerhalb des Sliders verlinken, entweder von externen Seiten oder direkt auf der Seite selbst.

 

Step Carousel Viewer

Dynamic Drive bietet ein Page Slider-Skript namens Step Carousel Viewer an, das ebenfalls jQuery verwendet. Die Beispiele, die sie auf der Seite verwenden, sind nur Bilder, aber die Panels selbst sind nur DIVs, sodass Sie theoretisch alles hineinstellen könnten, was Sie wollen. Es gibt einige einzigartige Navigationsoptionen, die dieses zu einem coolen Tool machen, wie z. B. „vorwärts 2 Panels“ und „zurück zum 1. Panel“, sowie die Option, anzuzeigen, welches Panel (oder welcher Bereich von Panels) Sie gerade sehen.

 

„Follow The Mouse“ Slider

Antonio Lupetti von Woork hat einen ziemlich coolen Page Slider, der, wie er sagt, einen Flash-Horizontal-Navigations-Effekt simuliert, diesmal mit MooTools. Die Technik ist einfach zu verstehen. Wie bei allen Sliders gibt es einen äußeren Container, der überlaufenden Inhalt darin verbirgt. Dann gibt es einen viel breiteren Container darin, von dem nur ein Teil zu jeder Zeit sichtbar ist. Anstatt dass sich der Slider um einen festen Betrag vorwärts oder rückwärts bewegt, bewegt sich dieser Slider nach rechts oder links, wenn sich Ihre Maus dem linken oder rechten Rand des äußeren Containers nähert.

 

jCarousel

Als ich mich nach diesen Page Sliders umgehört habe, war jCarousel derjenige, von dem ich am häufigsten gehört habe, daher denke ich, dass er der „beliebteste“ ist. Es gibt alle Arten von einzigartigen Optionen dafür: vertikal, automatische Scrollung, dynamischer Inhalt, automatisches Wiederholen, zusätzliche Animationen… Auch hier sind alle Beispiele Bild-Thumbnails, aber sie sind in Listenelementen verpackt, sodass Sie diese durch jede Art von Inhalt ersetzen könnten. Lassen Sie sich auch von der kleinen Größe nicht täuschen, alles ist vollständig über CSS steuerbar.

 

YUI Carousel

Natürlich würde die allseits beliebte YUI-Bibliothek nicht von all dem Spaß ausgeschlossen werden! Bill Scott hat die Carousel Component entwickelt, die viele der gleichen robusten Funktionen wie jCarousel bietet.

 

Beispiele in realer Anwendung

Ich habe mich in letzter Zeit ein wenig für das Page Slider-Konzept interessiert (wahrscheinlich ein bisschen zu sehr!), aber ich denke, es funktioniert für einige Dinge wirklich gut. Eines davon sind insbesondere Portfolios. Es hat etwas wirklich Reizvolles, durch ein Portfolio zu „blättern“. Es erinnert ein wenig an die Zeiten, als Portfolios große Lederdinger mit Griffen und Reißverschlüssen waren. Da jedes Projekt in einem Portfolio anders ist als das nächste, ist es schön, nur eines auf einmal zu sehen, aber nicht auf das Laden einer ganzen Seite warten zu müssen, wenn man das nächste sehen möchte. Diese sind größtenteils unfertig, aber Sie können sich einige Portfolio-ähnliche Seiten ansehen, die ich kürzlich erstellt habe: Chatman Design Print Portfolio – Jeff Campana Ceramics. Für ein traditionelleres Beispiel für Bild-Thumbnails / Lightboxen hier ist eine Mockup-Seite für einen anderen meiner Kunden: Rick Wilcox Magic Theater.