Kolumne: Dino talks

Ein Webkarussell mit Bootstrap
Kommentare

Karusselle findet man auf der Startseite vieler Websites, die in den letzten Jahren neu entstanden sind oder aufpoliert wurden. Ein Karussell ist ein ringförmiger Gürtel, der Bilder oder HTML-Inhalte unbegrenzt scrollen lässt. Weithin beliebt geworden sind Karusselle mit dem Einzug von jQuery und dem riesigen Fundus von Plug-ins, die dafür entstanden sind. Viele Entwickler sahen sich dem Problem gegenüber, die Karussellkomponente mit der höchsten Qualität aus den Myriaden verfügbarer Plug-ins auszuwählen. Mit Bootstrap 3 bekommen Sie eine integrierte Lösung, die einfach eines der auf dem Markt erhältlichen Plug-ins nutzt. Mit anderen Worten hat Bootstrap 3 Ihnen die Qual der Wahl abgenommen, das am besten geeignete Karussell auszuwählen, und eine Karussellkomponente in das API integriert. Dieser Artikel erläutert, was Sie brauchen, um die Komponente in Ihren Webseiten einsetzen zu können.

Karusselle sind in Websites allgegenwärtig und in der Tat ein allgemeines Beiwerk von Benutzeroberfläche. Mit Karussellen sieht die Website lebendiger und optisch attraktiver aus. Benutzer und Webdesigner scheinen sie zu lieben und letztlich sind Unmengen von jQuery-Komponenten entstanden, um Karusselle wirklich schnell zu machen und sie ohne großen Aufwand an Bord von Websites nehmen zu können. Ein Karussell kann verschiedenste Formen aufweisen, doch handelt es sich meistens um eine Art Panel, auf dem gleichgroße Bilder – die so genannten Slides – alle paar Sekunden zyklisch wechseln. Die an beiden Seiten platzierten Schaltflächen suggerieren dem Benutzer, dass er durch Klicken auf diese Schaltflächen zum vorhergehenden oder nächsten Slide gehen kann. Des Weiteren ziehen attraktive Übergänge zwischen den Slides die Aufmerksamkeit auf die Karussellinhalte.

Je populärer ein bestimmtes Feature – in diesem Fall das Karussell – ist, desto wahrscheinlicher ist es einer tieferen Analyse und manchmal auch Kritik ausgesetzt. Insbesondere nimmt man an, dass der über Karusselle gelieferte Inhalt vom Benutzer zum größten Teil übersehen wird. Folglich ist die Interaktion minimal und manche Benutzer beschweren sich sogar, dass Slides wie Werbung aussehen – sie ignorieren praktisch das Karussell. Manche Tests scheinen zu bestätigen, dass das Klicken auf Karussell-Slides weniger als 5 Prozent der Klickrate der Site ausmacht. Immerhin sind Karusselle ein modisches Feature und viele Benutzer fragen danach. Sehen Sie sich nun an, wie Sie Karusselle mit Bootstrap programmieren können.

Eine Bootstrap-Karussell-Template erstellen

Wie in Bootstrap üblich, ergibt sich eine konkrete HTML-Komponente aus dem kombinierten Effekt von Ad-hoc-HTML, CSS Styles und gelegentlich ein wenig JavaScript. Was Karusselle angeht, läuft alles auf das HTML-Layout in Listing 1 hinaus.

Listing 1

<div id="my-carousel" class="carousel slide" data-ride="carousel"><div id="my-carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item"> <!-- Content of the slide to rotate --> </div> <!--—More slides here ----> </div> </div></div> 

Das Attribut data-ride dient dem automatischen Start des Karussells zum Ladezeitpunkt. Wenn Sie das Attribut weglassen oder einen anderen Wert als carousel zuweisen, lässt sich das Karussell nur manuell weiterschalten, indem man auf die seitlichen Pfeile klickt. Sollten dem Karussell aus irgendeinem Grund die Steuerelemente für das manuelle Weiterschalten fehlen, dann setzen Sie entweder das Attribut data-ride auf automatisches Fortschalten der Bilder oder es wird nur das erste (oder das gerade aktive) Slide angezeigt.

Ein Karussell-Slide ist ein DIV-Element, das mit der Klasse item formatiert ist. Entscheidend ist, dass genau ein Slide mit der Klasse active formatiert sein muss. Die Klasse active kennzeichnet das Slide, das momentan angezeigt wird. Wenn kein Slide über dieses Format verfügt, wird kein Slide angezeigt. Besitzen zwei oder mehr Slides das Format, erscheinen sie alle gleichzeitig. Alle Slides innerhalb des Karussells sollten in ein umgebendes DIV-Element eingebunden sein, das als carousel-inner formatiert ist. Es liegt nahe, die Templates für die Karussellinhalte wegen ihrer wiederholenden Natur per Programm zu erstellen, sowohl auf dem Server über eine for each-Schleife in einer Razor-Ansicht als auch auf dem Client über ein Knockout.js-Template und etwas jQuery-Code, um den eigentlichen Inhalt herunterzuladen.

Jedes Karussell-Slide lässt sich mit einer HTML-Überschrift (Caption) versehen, die über dem eigentlichen Inhalt des Slides liegt. Eine Überschrift ist ein DIV-Element, das mit carousel-caption formatiert ist, wie das folgende Beispiel zeigt:

<div class="carousel-caption">
  <h3> ... </h3>
  <p> ... </p>
</div>

Eine Slide-Überschrift ist ein optionales Feature.

Einem Karusselltemplate Steuerelemente hinzufügen

Wie bereits erwähnt, kommen Sie ohne Navigationssteuerelemente in einem Karussell nicht allzu weit. Das Bootstrap-Karussell unterstützt zwei Steuerelemente: eines für den linken und eines für den rechten Rand. Im Markup sieht das beispielsweise so aus:

<a class="left carousel-control" href="#my-carousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#my-carousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>

Das Attribut data-slide akzeptiert Werte wie prev und next und bestimmt die Richtung der Slide-Navigation. Das Attribut href zeigt lediglich das Karussell an, auf das sich das Steuerelement bezieht. Außerdem können Sie das Attribut data-slide-to auf einen numerischen nullbasierten Index setzen, um ein bestimmtes Slide anzuzeigen, wenn der Benutzer klickt. Schließlich können Sie die Schaltflächen mit Glyphicons beschriften. In Bootstrap sind Glyphicons leere SPAN-Elemente und der Klassenname bindet sie an eines der vordefinierten Symbole und Schriftsymbole. Wenn Sie Bootstrap 3 herunterladen, bekommen Sie auch einen Ordner namens Fonts, der in früheren Versionen noch kein Bestandteil des Downloads war. In jedem Projekt, das Bootstrap verwendet, ist der Speicherort des Fonts-Ordners entscheidend, damit Glyphicons korrekt angezeigt werden. Der Fonts-Ordner muss sich auf derselben Ebene befinden wie der Ordner mit den Skripten und Styles von Bootstrap.

Indikatoren in eine Karusselltemplate einbinden

Schließlich kann ein Karussell Indikatoren anzeigen. Ein Karussellindikator wird normalerweise als leerer Kreis am unteren Rand des angezeigten Slides gerendert. In der Regel gibt es einen Indikator für jedes Slide, wobei der Kreis für das aktive Slide gefüllt ist. Der Indikator soll Benutzern einen Hinweis geben, an welcher Stelle sich die Rotation befindet und wie viele Slides seit dem letzten Mal gedreht wurden. Indikatoren sind auch ein optisches Features des Bootstrap-Karussells. Mit folgendem Code richten Sie Indikatoren ein:

<ol class="carousel-indicators">
  <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
  <li data-target="#my-carousel" data-slide-to="1"></li>
  <li data-target="#my-carousel" data-slide-to="2"></li>
  <li data-target="#my-carousel" data-slide-to="3"></li>
</ol>

Der Indikator ist ein klickbares Element, das den Benutzer einfach zum angegebenen Slide bringt.

Weitere Überlegungen zu Karussellen

Wie bereits erwähnt, veranlasst das Attribut data-ride, dass das Karussell automatisch startet, wenn die erste Seite geladen wird. Dieses Feature ist erst in Bootstrap 3 hinzugekommen. Karussells gibt es jedoch schon in früheren Versionen von Bootstrap. In diesen Versionen müssen Sie das Karussell per Programm starten, damit die Schleife beim Laden der Seite läuft. Das erreichen Sie mit folgendem Code:

$("#my-carousel").carousel({
    interval: 2000
});

Das optionale Attribut interval bestimmt die Anzeigedauer der einzelnen Slides. Standardmäßig ist es auf 5 Sekunden gesetzt. Das Intervall können Sie zudem deklarativ mit dem Attribut data-interval festlegen. Außerdem sind die beiden Attribute data-pause und data-wrap definiert. Das erste verweist auf die erforderliche Aktion, um das Karussell anzuhalten. Es ist standardmäßig auf hover gesetzt, sodass das Karussell stoppt, wenn der Benutzer den Mauszeiger über den Bereich führt. Dagegen zeigt das Attribut data-wrap an, ob das Karussell sich unaufhörlich drehen oder am Ende der Schleife anhalten soll. Der Standardwert ist true.

Als Übergang zwischen den Slides ist horizontales Gleiten eingestellt. Wenn Übergänge über CSS realisiert sind, können Sie dieses Verhalten leicht durch einen Effekt Ihrer Wahl ersetzen. Fügen Sie zum Beispiel das CSS aus Listing 2 in die Seite ein, um das nächste Slide allmählich einzublenden.

Listing 2

<style>
  .carousel {
    overflow: hidden;
  }

  .carousel .item {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
  }
  .carousel .active.left, .carousel .active.right {
    left: 0;
    opacity: 0;
    z-index: 2;
  }
  .carousel .next, .carousel .prev {
    left: 0;
    opacity: 1;
    z-index: 1;
  }
</style>

Schließlich ist zu beachten, dass die Karussellkomponente nur schwer mit Barrierefreiheit unter einen Hut zu bringen ist. Wenn also strenge Anforderungen hinsichtlich der Barrierefreiheit bestehen, sollten Sie sich besser nach anderen Möglichkeiten umsehen, um die gewünschten Inhalte anzuzeigen.

Zusammenfassung

Unterm Strich sind Karusselle recht beliebt, was weder Entwickler noch UX-Experten einfach ändern können. Anfangs tauchten Karusselle auf einigen coolen Seiten auf; sie regten andere Seiten an, die Lösung nachzuahmen und Karusselle einzusetzen, was schließlich zu einem Trend führte. Es gibt kaum Voruntersuchungen und Tests von Karussellen – gedankenlos verwendet, bringen sie mehr Schaden als Nutzen. Andererseits sind Karusselle hervorragend für bekannte oder angekündigte Inhalte geeignet, weniger für Inhalte, die Benutzern erstmalig begegnen.

Von ihrer Brauchbarkeit abgesehen, lassen sich Karusselle immerhin relativ leicht implementieren. Mit Bootstrap kann man sie nahtlos in Seiten integrieren und obendrein noch von den guten Reaktionseigenschaften des Frameworks profitieren.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -