Mercurial > dive4elements > website
changeset 50:47cc83e96d2e
Added support for switching dots in carousel.
| author | Sascha L. Teichmann <teichmann@intevation.de> |
|---|---|
| date | Thu, 20 Mar 2014 15:48:50 +0100 |
| parents | a9a3c55ef91c |
| children | a320af6ffa04 |
| files | main.html |
| diffstat | 1 files changed, 36 insertions(+), 31 deletions(-) [+] |
line wrap: on
line diff
--- a/main.html Thu Mar 20 14:01:48 2014 +0100 +++ b/main.html Thu Mar 20 15:48:50 2014 +0100 @@ -26,38 +26,43 @@ role="button">Herunterladen</a></p> <!-- Carousel --> - <div id="myCarousel" class="carousel slide" data-ride="carousel"> - <!-- Carousel items --> - <div class="carousel-inner"> - <div class="item active"> - <img src="img/einstieg.png" alt="Einstiegsseite" class="img-responsive"> - <!--div class="carousel-caption"> - <p>Einstiegsseite der Anwendung.</p> - </div--> - </div> - <div class="item"> - <img src="img/w-info_lang.png" alt="w-info" class="img-responsive"> - <!--div class="carousel-caption"> - <p>Das Modul W-Info mit Wasserspiegellage bei HQ100 der Elbe, einem - Wasserstand von HQ500 und dem Talweg(2004).</p> - </div--> - </div> - <div class="item"> - <img src="img/m-info_fliess.png" alt="m-info" class="img-responsive"> - <!--div class="carousel-caption"> - <p>Das Modul M-Info mit der Fließgeschwindigkeit der Elbe bei HQ100 als Gesamtrinne.</p> - </div--> - </div> - <div class="item"> - <img src="img/karte.png" alt="karte" class="img-responsive"> - <!--div class="carousel-caption"> - <p>Die Flußachse der Elbe mit aktuellen Querprofilspuren und der neuen OSM Hintergrundkarte.</p> - </div--> - </div> + <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="10000"> + <ol class="carousel-indicators"> + <li data-target="#myCarousel" data-slide-to="0" class="active"></li> + <li data-target="#myCarousel" data-slide-to="1"></li> + <li data-target="#myCarousel" data-slide-to="2"></li> + <li data-target="#myCarousel" data-slide-to="3"></li> + </ol> + <!-- Carousel items --> + <div class="carousel-inner"> + <div class="item active"> + <img src="img/einstieg.png" alt="Einstiegsseite" class="img-responsive"> + <div class="carousel-caption"> + <!--<p>Einstiegsseite der Anwendung.</p> --> + </div> </div> - <!-- Carousel nav --> - <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="glyphicon glyphicon-chevron-left"></span></a> - <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="glyphicon glyphicon-chevron-right"></span></a> + <div class="item"> + <img src="img/w-info_lang.png" alt="w-info" class="img-responsive"> + <div class="carousel-caption"> + <!--<p>Das Modul W-Info mit Wasserspiegellage bei HQ100 der Elbe, einem Wasserstand von HQ500 und dem Talweg(2004).</p> --> + </div> + </div> + <div class="item"> + <img src="img/m-info_fliess.png" alt="m-info" class="img-responsive"> + <div class="carousel-caption"> + <!--<p>Das Modul M-Info mit der Fließgeschwindigkeit der Elbe bei HQ100 als Gesamtrinne.</p>--> + </div> + </div> + <div class="item"> + <img src="img/karte.png" alt="karte" class="img-responsive"> + <div class="carousel-caption"> + <!--<p>Die Flußachse der Elbe mit aktuellen Querprofilspuren und der neuen OSM Hintergrundkarte.</p> --> + </div> + </div> + </div> + <!-- Carousel nav --> + <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="glyphicon glyphicon-chevron-left"></span></a> + <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="glyphicon glyphicon-chevron-right"></span></a> </div><!-- /myCarousel --> </div><!-- /jumbobutton-->