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 id="myCarousel" class="carousel slide">
+  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
-    <ol class="carousel-indicators">
+  <!-- Indicators -->
+  <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>
-    <li data-target="#myCarousel" data-slide-to="4"></li>
-    <li data-target="#myCarousel" data-slide-to="5"></li>
+  <!-- Wrapper for slides -->
-    <li data-target="#myCarousel" data-slide-to="6"></li>
+  <div class="carousel-inner">
-    <li data-target="#myCarousel" data-slide-to="7"></li>
+     <div class="item active">
-    <li data-target="#myCarousel" data-slide-to="8"></li>
+            <img src="/smw/images/2/28/Himeji.jpg" class="img-responsive" />
-    <li data-target="#myCarousel" data-slide-to="9"></li>
-    </ol>
-    <!-- Carousel items -->
-    <div class="carousel-inner">
-     <div class="item active"><a href="/castle/1/"><img src="/smw/images/2/28/Himeji.jpg" alt="姫路城" /></a><span id="caption">姫路城</span></div>
-    <div class="item "><a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a><span id="caption">熊本城</span></div>
-    <div class="item "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
-    <div class="item "><a href="/castle/18/"><img src="/smw/images/2/28/Himeji.jpg" alt="江戸城" /></a><span id="caption">江戸城</span></div>
-    <div class="item active"><a href="/castle/1/"><img src="/smw/images/2/28/Himeji.jpg" alt="姫路城" /></a><span id="caption">姫路城</span></div>
-    <div class="item "><a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a><span id="caption">熊本城</span></div>
-    <div class="item "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
-    <div class="item "><a href="/castle/18/"><img src="/smw/images/2/28/Himeji.jpg" alt="江戸城" /></a><span id="caption">江戸城</span></div>
-    <div class="item "><a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a><span id="caption">熊本城</span></div>
-    <div class="item "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
      </div>
-    <!-- Carousel nav -->
-     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+     <div class="item">
-    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
      </div>
+    <div class="item">
+            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
+    </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>
+</div>