Swipe JS: Leichtgewichter Slider für Touch-Devices

Swipe JS ist ein leichtgewichtiges Slider-Skript, das den aus nativen Apps gewohnten Slide-Effekt beim „Swipen” nachahmt. Per Wische-Geste kann man so z.B. zwischen mehreren Bildern navigieren, wobei das Bild quasi am Finger „klebt”. Das Skript hat keine Abhängigkeiten zu anderen JavaScript-Bibliotheken.

Swipe is a lightweight mobile slider with 1:1 touch movement. 1:1 touch movement is sliding content based on exact touch position. It’s a different level of interacting with the content, more intuitive than swiping left to right and then watching the slider move to the proper position.

Swipe Beispiel

Ausprobieren kann man den Slider auf einem mobilen Device mit dem mitgelieferten Beispiel.

Swipe und jQuery Mobile

Ich habe ein weiteres Beispiel erstellt, dass Swipe JS in jQuery Mobile verwendet. Da jQuery Mobile standardmäßig beim Laden einer weiteren Seiten nur den Inhalt des Page-Containers einbindet (und nicht den Inhalt des HTML-Head!), ist die Integration etwas schwieriger als in einer normalen Seite. Man muss die Skripte etwas anders einbinden, damit es sowohl funktioniert, wenn man die Seite direkt aufruft, als auch wenn sie nachgeladen wird.

Anschauen kann man es sich über dieses Beispiel: Seite 1 und Seite 2

[js]
$(document).ready(function() {

// Dieser Aufruf sollte laut jQM-Doku eigentlich nicht nötig sein, fkt sonst aber nicht:
loadSwipe();

$( ‚#sliderPage‘ ).live( ‚pageinit‘,function(event){
loadSwipe();
});

function loadSwipe() {
$.getScript(„swipe.js“, function(data, textStatus, jqxhr) {
console.log(textStatus); //success
document.slider1 = new Swipe(document.getElementById(’slider1′));
});
}

});

[/js]

Das Beispiel lädt beim Aufrufen der Seite mit der ID sliderPage zunächst die swipe.js-Datei und verknüpft danach die Variable slider1 mit dem entsprechenden DOM-Element.

Allerdings gibt es laut Bugtracker in Verbindung mit jQuery Mobile noch einige Bugs, so dass jQuery Mobile wohl erst in der nächsten Version offiziell unterstützt wird. Man sollte sich dies also vorher nochmal genau anschauen, wenn man diese Kombination nutzen möchte.

Link: Swipe JS (Github)
Link: Swipe JS – a lightweight mobile web slider
Link: Scripting Pages in jQuery Mobile

[ad]