Widget:Carousel: Difference between revisions

Revision as of 23:39, 24 July 2017

<style> .carousel {

 position: relative;
 width: 500px;
 height: 500px;

} .carousel .item{ min-height: 500px; }

</style>

<a class="left carousel-control" href="#custom-bootstrap-carousel" role="button" data-slide="prev"></a><a class="right carousel-control"

   href="#custom-bootstrap-carousel" role="button" data-slide="next">Next</a>

@@ Line 12: / Line 12: @@
-<div id="carousel" class="carousel slide" data-ride="carousel">
+<div id="custom-bootstrap-carousel" class="carousel slide" data-ride="carousel" data-interval="7000">
-  <ol class="carousel-indicators">
+    <ol class="carousel-indicators">
-    <li data-target="#carousel" data-slide-to="0" class="active"></li>
+        <li data-target="#custom-bootstrap-carousel" data-slide-to="0" class="active"></li>
-    <li data-target="#carousel" data-slide-to="1"></li>
+        <li data-target="#custom-bootstrap-carousel" data-slide-to="1"></li>
-    <li data-target="#carousel" data-slide-to="2"></li>
+        <li data-target="#custom-bootstrap-carousel" data-slide-to="2"></li>
-  </ol>
+        <li data-target="#custom-bootstrap-carousel" data-slide-to="3"></li>
-  <div class="carousel-inner" role="listbox">
+        <li data-target="#custom-bootstrap-carousel" data-slide-to="4"></li>
-    <div class="item active">
+    </ol>
-      <img src="http://placehold.it/500x200" alt="Slide 1">
+    <div class="carousel-inner" role="listbox">
-      <div class="carousel-caption">
+        <div class="item active">
-        Slide 1
+            <img src="http://bootstrapdesigntools.com/assets/images/1024x400/1.jpg" alt="Lisbon">
-      </div>
+            <div class="carousel-caption">The is a new first slide</div>
-    </div>
+        </div>
-    <div class="item">
+        <div class="item">
-      <img src="http://placehold.it/500x200" alt="Slide 2">
+            <img src="http://bootstrapdesigntools.com/assets/images/1024x400/2.jpg">
-      <div class="carousel-caption">
+            <div class="carousel-caption">The is the second slide</div>
-        Slide 2
+        </div>
-      </div>
+        <div class="item">
-    </div>
+            <img src="http://bootstrapdesigntools.com/assets/images/1024x400/3.jpg">
-    <div class="item">
+        </div>
-      <img src="http://placehold.it/500x200" alt="Slide 3">
+        <div class="item">
-      <div class="carousel-caption">
+            <a href="http://google.com" target="_blank" class="carousel-link">
-         Slide 3
+                <img src="/assets/images/1024x400/4.jpg">
-      </div>
+                <div class="carousel-caption">Fourth slide</div>
-    </div>
+            </a>
-  </div>
+         </div>
-  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
+        <div class="item">
-    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+            <a href="http://google.com" class="carousel-link">
-    <span class="sr-only">Previous</span>
+                <img src="http://bootstrapdesigntools.com/assets/images/1024x400/5.jpg">
-  </a>
+            </a>
-  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
+        </div>
-    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+    </div><a class="left carousel-control" href="#custom-bootstrap-carousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control"
-    <span class="sr-only">Next</span>
+    href="#custom-bootstrap-carousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
-  </a>
 </div>