Widget:Carousel: Difference between revisions
From Jcastle.info
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<div class="container"> | <div class="container"> | ||
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000" data-wrap="true"> | <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000" data-wrap="true"> | ||
<!-- Indicators --> | |||
<ol class="carousel-indicators"> | <ol class="carousel-indicators"> | ||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> | <li data-target="#myCarousel" data-slide-to="0" class="active"></li> | ||
| Line 6: | Line 7: | ||
<li data-target="#myCarousel" data-slide-to="2"></li> | <li data-target="#myCarousel" data-slide-to="2"></li> | ||
<li data-target="#myCarousel" data-slide-to="3"></li> | <li data-target="#myCarousel" data-slide-to="3"></li> | ||
</ol> | </ol> | ||
<!-- | <!-- Wrapper for slides --> | ||
<div class="carousel-inner" role="listbox"> | <div class="carousel-inner" role="listbox"> | ||
<div class="item active" | <div class="item active"> | ||
<img src="/smw/images/2/28/Himeji.jpg" width="900" height="208" /> | |||
<div class="carousel-caption"> | |||
<p>Himeji Castle</p> | |||
<div class=" | |||
< | |||
</div> | </div> | ||
<!-- | </div> | ||
<a class="carousel-control | <div class="item"> | ||
<a class="carousel-control | <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> | ||
</div> | </div> | ||
