Immer mehr (so beginnt jeder gute Artikel in einer Frauenzeitschrift) Web Seiten beinhalten einen Image Slider. Und immer mehr gewinne ich den Eindruck, das 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 nicht nur ein Bild sein, sondern alles was in ein DIV so passt (Item). Zur Steuerung bzw. direkten Sprung kann der Benutzer den Indikator verwenden. Dieser kann direkt wie ein Pager 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.
Da ganze als HTML. Mit den Attributen wird Intervall in MIllissekunden, und das Verhalten am Ende der Bild Liste gesteuert.
Die Indikator Elemente werden als direkte Navigationselemente verwendet.
1: <divclass="carousel slide"id="carousel-example-generic"
data-ride="carousel"data-interval="3000"wrap="true">
2: 3: <olclass="carousel-indicators">
4: <lidata-slide-to="0"
data-target="#carousel-example-generic"></li>
5: <liclass="active"data-slide-to="1"
data-target="#carousel-example-generic"></li>
6: <lidata-slide-to="2"d
ata-target="#carousel-example-generic"></li>
7: </ol>
8: 9: <divclass="carousel-inner">
10: <divclass="item">
11: <imgalt="PX"src="img/px.png">
12: <divclass="carousel-caption">
13: <h3>Vespa PX 200E</h3>
14: <p>Modernere Bauart</p>
15: </div>
16: </div>
17: <divclass="item active">
18: <ahref="http://www.ppedv.de">
19: <imgalt="LX"src="img/lx.png"></a>
20: <divclass="carousel-caption">
21: <h3>Vespa LX</h3>
22: <p>jüngere 50er und 125er</p>
23: </div>
24: </div>
25: <divclass="item">
26: 27: <imgalt="GS"src="img/gs.png">
28: <divclass="carousel-caption">
29: <h3>Vespa GS 150</h3>
30: <p>alter Klassiker</p>
31: </div>
32: </div>
33: </div>
34: 35: 36: <aclass="left carousel-control"
href="#carousel-example-generic"data-slide="prev">
37: <spanclass="glyphicon glyphicon-chevron-left"></span>
38: </a>
39: <aclass="right carousel-control"
href="#carousel-example-generic"data-slide="next">
40: <spanclass="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>
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.