Widget:Carousel: Difference between revisions

Revision as of 00:02, 24 July 2017

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

@@ Line 1: / Line 1: @@
 <div class="container">
-<div id="Mycarousel" class="carousel slide carousel-fade" data-ride="carousel">
+<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000" data-wrap="true">
-    <ol class="carousel-indicators">
+<!-- Indicators -->
-        <li data-target="#carousel" data-slide-to="0" class="active">test1</li>
+<ol class="carousel-indicators">
-        <li data-target="#carousel" data-slide-to="1">test2</li>
+<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-        <li data-target="#carousel" data-slide-to="2">test3</li>
+<li data-target="#myCarousel" data-slide-to="1"></li>
-    </ol>
+<li data-target="#myCarousel" data-slide-to="2"></li>
-    <!-- Carousel items -->
+<li data-target="#myCarousel" data-slide-to="3"></li>
-    <div class="carousel-inner">
+</ol>
-        <div class="active item"></div>
+<!-- Wrapper for slides -->
-        <div class="item"></div>
+<div class="carousel-inner" role="listbox">
-        <div class="item"></div>
+<div class="item active">
-    </div>
+<img src="/smw/images/2/28/Himeji.jpg" width="900" height="208" />
-    <!-- Carousel nav -->
+<div class="carousel-caption">
-    <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
+<p>Himeji Castle</p>
-    <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
+</div>
+</div>
+<div class="item">
+<img src="/smw/images/c/c9/Akashi.jpg" width="900" height="208" />
+<div class="carousel-caption">
+<p>Akashi Castle</p>
+</div>
+</div>
+<div class="item">
+<img src="/smw/images/b/b5/Matsue.jpg" width="900" height="208" />
+<div class="carousel-caption">
+<p>Matsue Castle</p>
+</div>
+</div>
+<div class="item">
+<img src="/smw/images/2/28/Himeji.jpg" width="900" height="208" />
+<div class="carousel-caption">
+<p>Himeji Castle</p>
+</div>
+</div>
+</div>
+<!-- Left and right controls -->
+<a class="left carousel-control" href="#myCarousel" role="button" data-slide="pre">
+<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>