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: @@
-<style>
+   <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
-.item img {
+  <!-- Indicators -->
-  width: 100%;
-  height: auto
-}
-.carousel {
-  position: relative;
-  width: 500px;
-  height: 200px;
-}
-ol.carousel-indicators {
-  position: absolute;
-  bottom: 0;
-  margin: 0;
-  left: 0;
-  right: 0;
-  width: auto;
-}
-ol.carousel-indicators li,
-ol.carousel-indicators li.active {
-  float: left;
-  width: 33%;
-  height: 10px;
-  margin: 0;
-  border-radius: 0;
-  border: 0;
-  background: transparent;
-}
-ol.carousel-indicators li.active {
-   background: yellow;
-}
-</style>
-<div id="carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
-     <li data-target="#carousel" data-slide-to="0" class="active"></li>
+     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-     <li data-target="#carousel" data-slide-to="1"></li>
+     <li data-target="#myCarousel" data-slide-to="1"></li>
-     <li data-target="#carousel" data-slide-to="2"></li>
+     <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
-   <div class="carousel-inner" role="listbox">
+  <!-- Wrapper for slides -->
+   <div class="carousel-inner">
      <div class="item active">
-      <img src="http://placehold.it/500x200" alt="Slide 1">
+            <img src="/smw/images/2/28/Himeji.jpg" class="img-responsive" />
-      <div class="carousel-caption">
-        Slide 1
-      </div>
      </div>
      <div class="item">
-      <img src="http://placehold.it/500x200" alt="Slide 2">
+            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
-      <div class="carousel-caption">
-        Slide 2
-      </div>
      </div>
      <div class="item">
-      <img src="http://placehold.it/500x200" alt="Slide 3">
+            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
-      <div class="carousel-caption">
-        Slide 3
-      </div>
      </div>
    </div>
-   <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
-     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+<!-- 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="#carousel" role="button" data-slide="next">
+   <a class="right carousel-control" href="#myCarousel" data-slide="next">
-     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+     <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
 </div>