Bootstrap Karussell per Touch steuern

Das Bootstrap Karussell wird mittlerweile auf sehr vielen Webseiten genutzt. Mit ganz wenig Code kann der Entwickler hier eine leicht zu erweiternde und responsive Bildergalerie erstellen. Das Ganze hat aber leider einen kleinen Schönheitsfehler.

Zunächst muss das Grundgerüst erstellt werden

Das Grundgerüst für ein einfaches Karussell würde z.B. folgendermaßen aussehen:

<div id="meinKarusell" class="carousel slide" data-ride="carousel">
  
    <ol class="carousel-indicators">
        <li data-target="#meinKarussell" data-slide-to="0" class="active"></li>
        <li data-target="#meinKarussell" data-slide-to="1"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="bild1.jpg" alt="Bild 1" />
        </div>
        <div class="item">
            <img src="bild2.jpg" alt="Bild 2" />
        </div>    
    </div>

</div>

Funktionalitäten wie Captions oder Steuerungspfeile lassen sich leicht erweitern.

Das Karussell ist responsiv und skaliert brav auf allen Endgeräten und Auflösungen, vorausgesetzt man befindet sich im Bootstap Grundgerüst. Eine kleine Schwäche hat das Ganze dann aber doch. Auf mobilen Endgeräten versucht man vergebens per Fingerwischen, dem sogenannten Swipen, zwischen den Bildern hin und her zu wechseln. Ein Ärgernis für den User und fatal was die User Experience angeht, zumal sich der User, vor allem bei Bildern, an das links und rechts Wischen gewöhnt hat.

jQuery Mobile Framework

Abhilfe schafft an der Stelle eine externe Bibliothek. jQuery hat ein Mobile Framework entwickelt, das auf die Besonderheiten der Steuerung von Internetseiten auf mobilen Endgeräten eingeht. Mit dem Framework ist es möglich mobil optimierte Seiten und Apps zu entwickeln oder bereits bestehende Seiten für die mobile Steuerung zu optimieren. Letzteres wird hier präsentiert.

Zunächst muss die jQuery Mobile Framework Javascript Datei in die bestehende Seite inkludiert werden. Ich empfehle an der Stelle unbedingt ein Custom Download zusammenzustellen, nur mit den Funktionalitäten, die auch gebraucht werden. Für dieses Beispiel ist nur das Touch Event notwendig. jQuery markiert automatisch alle abhängigen Module. Die Größe der minifizierten Datei ist um ein 50-faches kleiner als die Größe des kompletten Frameworks.

Nachdem die Datei inkludiert ist, muss das Swipe Event mit dem Bootstrap Karussell verknüpft werden. Folgender Code wird eingefügt:

<script>
    $(document).ready(function() {
        $("#meinKarussell").swiperight(function() {
            $(this).carousel('prev');
        });
        $("#meinKarussell").swipeleft(function() {
            $(this).carousel('next');
        });
    });
</script>

Sobald also innerhalb des DIV mit der id meinKarussell ein Swipe Event ausgeführt wird, wird der Javaskript Code ausgeführt, der sich jeweils innerhalb des entsprechenden Blocks befindet. In dem Fall sind es die einfachen Bootstrap Befehle nächstes bzw. voriges Bild. Das Prinzip lässt sich daher auf jede beliebige Bildergalerie anwenden.

An der Stelle noch ein interessanter Artikel auf PHPmagazin zum Thema Karussell, der die Wichtigkeit einer guten User Experience auf mobilen Geräten unterstreicht.

Benutzte Software:
Bootstrap v3.3.1
jQuery Mobile v1.4.5