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: @@
-<!-- Carousel container -->
+  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
-<div id="my-pics" class="carousel slide" data-ride="carousel" style="width:300px;margin:auto;">
+  <!-- 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>
+  </ol>
-<!-- Indicators -->
+  <!-- Wrapper for slides -->
-<ol class="carousel-indicators">
+  <div class="carousel-inner">
-<li data-target="#my-pics" data-slide-to="0" class="active"></li>
+    <div class="item active">
-<li data-target="#my-pics" data-slide-to="1"></li>
+            <img src="/smw/images/2/28/Himeji.jpg" class="img-responsive" />
-<li data-target="#my-pics" data-slide-to="2"></li>
+    </div>
-</ol>
-<!-- Content -->
+    <div class="item">
-<div class="carousel-inner" role="listbox">
+            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
+    </div>
-<!-- Slide 1 -->
+    <div class="item">
-<div class="item active">
+            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
-<img src="/smw/images/2/28/Himeji.jpg" />
+    </div>
-</div>
+  </div>
-<!-- Slide 2 -->
+<!-- Left and right controls -->
-<div class="item">
+  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
-<img src="/smw/images/c/c9/Akashi.jpg" />
+    <span class="glyphicon glyphicon-chevron-left"></span>
-</div>
+    <span class="sr-only">Previous</span>
+  </a>
-<!-- Slide 3 -->
+  <a class="right carousel-control" href="#myCarousel" data-slide="next">
-<div class="item">
+    <span class="glyphicon glyphicon-chevron-right"></span>
-<img src="/smw/images/5/5d/Takeda.jpg" />
+    <span class="sr-only">Next</span>
-</div>
+  </a>
-<!-- Slide 3 -->
-<div class="item">
-<img src="/smw/images/1/1b/Bitchu23.jpg" />
-</div>
-<!-- Slide 3 -->
-<div class="item">
-<img src="/smw/images/4/4e/Bitchu3.jpg" />
-</div>
-</div>
-<!-- Previous/Next controls -->
-<a class="left carousel-control" href="#my-pics" role="button" data-slide="prev">
-<span class="icon-prev" aria-hidden="true"></span>
-<span class="sr-only">Previous</span>
-</a>
-<a class="right carousel-control" href="#my-pics" role="button" data-slide="next">
-<span class="icon-next" aria-hidden="true"></span>
-<span class="sr-only">Next</span>
-</a>
 </div>