Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Rollercoaster: Multidirektionaler Slider mit Touch-Support

Rollercoaster Slider Screenshot

Rollercoaster lässt dich Inhalte und Bilder in horizontal und vertikal angeordneten Ebenen anordnen und sliden. Was der responsive Slider zu bieten hat, erfährst du hier.

Es gibt viele Slider-Lösungen im Netz, doch keiner lieferte uns die Ergebnisse, die wir für unser Projekt brauchten. Als Notlösung benutzten wir zunächst mehrere Bootstrap-Carousels und verzichteten auf Touch-Support. Da die Animationen des Bootstrap-Sliders mit JavaScript realisiert wurden, gestaltete sich der Umbau des Carousels, insbesondere das Nachrüsten von zufriedenstellendem Touch-Support, als schwierig. Ein eigenes Skript musste her! Heute freuen wir uns, euch unsere Lösung präsentieren zu können: Rollercoaster.

Was ist Rollercoaster?

Rollercoaster Slider Screenshot
Der Rollercoaster-Slider.

Rollercoaster ist ein horizontaler und vertikaler Slider für Bilder und andere Seiten-Inhalte, den ich zusammen mit meinem Team der imbaa Kreativagentur entwickelt habe. Rollercoaster ist responsive und unterstützt Touchscreen-Eingaben, sodass er flexibel in verschiedensten Szenarien eingesetzt werden kann. Für eine bessere Navigation stellt das Skript außerdem eine Minimap-Funktion zur Verfügung, die ein schnelles Springen zu verschiedenen Bereichen des Sliders ermöglicht.

Mit CSS3-Transitions bietet Rollercoaster sogar auf mobilen Geräten eine sehr gute Performance. Bei Bedarf stellt Rollercoaster eine Lazyload-Funktion für verzögertes Nachladen von Inhalten zur Verfügung und kann sowohl als Vollbild-Slider als auch als Inline- oder Block-Element eingebunden werden.

Anzeige

So benutzt du Rollercoaster

Rollercoaster baut auf eine Reihe von JavaScript Bibliotheken auf und benötigt jQuery, Modernizr sowie Hammer.js um ordnungsgemäß zu funktionieren. Sind diese Bibliotheken eingebunden, müssen nur noch die Rollercoaster Projektdaten eingebunden werden:

<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/vendor/jquery.hammer.min.js"></script>
<script src="js/rollercoaster.js"></script>
<link href="rollercoaster/css/rollercoaster.min.css" rel="stylesheet" media="screen">

Rollercoaster erwartet eine bestimmte Markup-Basis um korrekt zu funktionieren:

<div id="myRollercoaster">
<a>Down</a>
<a>Up</a>
<a>Left</a>
<a>Right</a>
<div>
<section data-section-title="Section 1">
<div data-background="picture1.jpg"></div>
<div data-background="picture2.jpg"></div>
</section>
<section data-section-title="Section 2">
<div data-background="picture3.jpg"></div>
</section>
(...)
</div>
</div>

Im Anschluss muss das Skript nur noch initialisiert werden:

<script>
$(document).ready(function(){
var rctr = new rollercoaster_slider("#myRollercoaster");
rctr.init();
}
</script>

Schon steht dir dein Slider zur Verfügung.

Rollercoaster einstellen und fernsteuern

Standardmäßig wird Rollercoaster mit allen Features initialisiert. Bei Bedarf können aber die Lazyload-Funktion und die Minimap während der Initialisierung deaktiviert werden. Außerdem kann der Touch-Support bei Bedarf eingeschränkt oder komplett deaktiviert werden. Über eine Reihe von Funktionen kann der Slider statt über die mitgelieferten Navigationselemente via JavaScript gesteuert werden.

Rollercoaster: Download & Feedback

Der erste öffentliche Release von Rollercoaster steht erst seit kurzer Zeit zum Download zur Verfügung. In Zukunft sollen neben einer Optimierung des Codes zusätzliche Features folgen. Wir freuen uns auf Feedback, Vorschläge und Feature-Wünsche!

Rollercoaster wurde mit Safari ab Version 6.0.5, Chrome ab Version 28, Firefox ab Version 22, Internet Explorer ab Version 8, Mobile Safari (iOS6), Mobile Chrome (iOS6) und den Android Standard Browser getestet.

Ein eigenes Bild vom Slider kannst du dir auf der offiziellen Webseite von Rollercoaster oder auf GitHub machen.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot