Widget:Carousel: Difference between revisions

Latest revision as of 08:46, 14 January 2018

           <img src="/smw/images/2/28/Himeji.jpg" class="img-responsive" />

           <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />

           <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />

 <a class="left carousel-control" href="#myCarousel" data-slide="prev">
   
   Previous
 </a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">
   
   Next
 </a>

@@ Line 1: / Line 1: @@
-<div class="container">
+   <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
-  <h2>Carousel Options</h2>
+  <!-- Indicators -->
-  <p>The <strong>data-wrap</strong> attribute specifies whether the carousel should go through all slides continuously, or stop at the last slide.</p>
+  <ol class="carousel-indicators">
-  <p>In this example, we have set wrap to "false", which will stop the carousel from sliding when the last item is shown.</p>
+    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-   <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500" data-wrap="false">
+    <li data-target="#myCarousel" data-slide-to="1"></li>
-    <!-- Indicators -->
+    <li data-target="#myCarousel" data-slide-to="2"></li>
-    <ol class="carousel-indicators">
+  </ol>
-      <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>
-    <!-- Wrapper for slides -->
+  <!-- Wrapper for slides -->
-    <div class="carousel-inner" role="listbox">
+  <div class="carousel-inner">
-      <div class="item active">
+    <div class="item active">
-        <img src="himeji.jpg" alt="Chania" width="460" height="345">
+            <img src="/smw/images/2/28/Himeji.jpg" class="img-responsive" />
-      </div>
+    </div>
-      <div class="item">
+    <div class="item">
-        <img src="akashi.jpg" alt="Chania" width="460" height="345">
+            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
-      </div>
+     </div>
-      <div class="item">
-        <img src="kinojo.jpg" alt="Flower" width="460" height="345">
-      </div>
-      <div class="item">
+    <div class="item">
-        <img src="matsue.jpg" alt="Flower" width="460" height="345">
+            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
-      </div>
      </div>
+  </div>
+<!-- Left and right controls -->
+  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="right carousel-control" href="#myCarousel" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right"></span>
+    <span class="sr-only">Next</span>
+  </a>
-    <!-- Left and right controls -->
-    <a class="left carousel-control" href="#myCarousel" 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" href="#myCarousel" role="button" data-slide="next">
-      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-      <span class="sr-only">Next</span>
-    </a>
-  </div>
 </div>