Immer mehr (so beginnt jeder gute Artikel in einer Frauenzeitschrift) Webseiten beinhalten einen Image Slider. Und immer mehr gewinne ich den Eindruck, dass der aktuelle HTML5, CSS, JS-Weg das wiederholt was zu Visual Basic 4-Zeiten passiert ist: Komplexität in OCXen Widgets zu verstecken. Mein neuestes Fundstück ist in Bootstrap das Carousel.
Das Carousel Widget aus Bootstrap 3 kann ein oder mehrere Bilder durch Sliding-Effekte wechselnd darstellen. Da man mit HTML arbeitet, muss es kein Bild sein, sondern kann alles sein, was in ein DIV so passt (Item). Zur Steuerung bzw. zum direkten Sprung kann der Benutzer den Indikator verwenden. Dieser kann direkt wie ein Pager benutzt werden oder auch mit einer Next-Logik versehen werden. Dies macht Sinn, wenn es wesentlich mehr Bilder sind. Außerdem befindet sich rechts und links ein Carousel-Control. Dazu kommt eine Überschrift, die auch außerhalb des Bild-Bereiches platziert werden kann.
Das Ganze als HTML. Mit den Attributen wird Intervall in Millisekunden, und das Verhalten am Ende der Bild-Liste gesteuert.
Die Indikator-Elemente werden als direkte Navigationselemente verwendet.
1: <div class="carousel slide" id="carousel-example-generic"
data-ride="carousel" data-interval="3000" wrap="true">
2:
3: <ol class="carousel-indicators">
4: <li data-slide-to="0"
data-target="#carousel-example-generic"></li>
5: <li class="active" data-slide-to="1"
data-target="#carousel-example-generic"></li>
6: <li data-slide-to="2" d
ata-target="#carousel-example-generic"></li>
7: </ol>
8:
9: <div class="carousel-inner">
10: <div class="item">
11: <img alt="PX" src="img/px.png">
12: <div class="carousel-caption">
13: <h3>Vespa PX 200E</h3>
14: <p>Modernere Bauart</p>
15: </div>
16: </div>
17: <div class="item active">
18: <a href="http://www.ppedv.de">
19: <img alt="LX" src="img/lx.png"></a>
20: <div class="carousel-caption">
21: <h3>Vespa LX</h3>
22: <p>jüngere 50er und 125er</p>
23: </div>
24: </div>
25: <div class="item">
26:
27: <img alt="GS" src="img/gs.png">
28: <div class="carousel-caption">
29: <h3>Vespa GS 150</h3>
30: <p>alter Klassiker</p>
31: </div>
32: </div>
33: </div>
34:
35:
36: <a class="left carousel-control"
href="#carousel-example-generic" data-slide="prev">
37: <span class="glyphicon glyphicon-chevron-left"></span>
38: </a>
39: <a class="right carousel-control"
href="#carousel-example-generic" data-slide="next">
40: <span class="glyphicon glyphicon-chevron-right"></span>
41: </a>
42: </div>
Natürlich lässt sich per CSS das visuelle Erscheinungsbild noch verändern. Da die Styles natürlich in bootstrap.css vordefiniert sind, muss die Definition nachgelagert erfolgen.
1: <style>
2: .carousel-caption {
3: position:absolute;
4: top:-10px;
5: left:auto;
6: right:20px;
7: bottom:0;
8: height: auto;
9: z-index: 30;
10: background: none;
11: }
12:
13: .carousel-indicators {
14: top: 20px;
15: }
16:
17: .carousel-indicators li {
18: width: 12px;
19: height: 12px;
20: margin: 0 3px;
21: background: #555;
22: opacity: 0.3;
23: border: none;
24: transition: all 0.3s;
25: }
26:
27: .carousel-indicators li.active {
28: width: 12px;
29: height: 12px;
30: margin: 0 3px;
31: opacity: 1;
32: background-color: #555;
33: }
34: </style>
Warum erinnert mich das an die VB-Zeiten? Damals sprangen unzählige Control-Hersteller in die Unzulänglichkeiten von Microsoft ein. Schon mit Releasewechsel waren die Controls nicht mehr funktionsfähig. Die allermeisten Hersteller existierten nur sehr kurz. Ein Control in einem Projekt durch ein anderes zu ersetzen überstieg den Aufwand der ursprünglichen Implementierung.
Was ist der Unterschied, VB 6-Anwendungen laufen auch noch nach 10 Jahren. Das wird keiner mit einer Bootstrap, JQuery und sonst was basierten Seite auch nur 2 Jahre schaffen.