[PATCH] Added support for switching dots in carousel

[Wald Commits]

# HG changeset patch
# User Sascha L. Teichmann <teichmann at intevation.de>
# Date 1395326930 -3600
# Node ID 47cc83e96d2eac86d0b56d2bd77a8da7c842d61d
# Parent  a9a3c55ef91c2d9afe39ad06c1e05d8de1be7ab2
Added support for switching dots in carousel.

diff -r a9a3c55ef91c -r 47cc83e96d2e main.html
--- 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-->