|
|
| (34 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <style> | | <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500"> |
| .carousel {
| | <!-- Indicators --> |
| position: relative; | | <ol class="carousel-indicators"> |
| width: 500px; | | <li data-target="#myCarousel" data-slide-to="0" class="active"></li> |
| height: 500px;
| | <li data-target="#myCarousel" data-slide-to="1"></li> |
| }
| | <li data-target="#myCarousel" data-slide-to="2"></li> |
| .carousel .item{
| | </ol> |
| min-height: 500px;
| |
| }
| |
|
| |
|
| </style> | | <!-- Wrapper for slides --> |
| | <div class="carousel-inner"> |
| | <div class="item active"> |
| | <img src="/smw/images/2/28/Himeji.jpg" class="img-responsive" /> |
| | </div> |
|
| |
|
| | <div class="item"> |
| | <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 id="custom-bootstrap-carousel" class="carousel slide" data-ride="carousel" data-interval="7000">
| |
| <ol class="carousel-indicators">
| |
| <li data-target="#custom-bootstrap-carousel" data-slide-to="0" class="active"></li>
| |
| <li data-target="#custom-bootstrap-carousel" data-slide-to="1"></li>
| |
| <li data-target="#custom-bootstrap-carousel" data-slide-to="2"></li>
| |
| <li data-target="#custom-bootstrap-carousel" data-slide-to="3"></li>
| |
| <li data-target="#custom-bootstrap-carousel" data-slide-to="4"></li>
| |
| </ol>
| |
| <div class="carousel-inner" role="listbox">
| |
| <div class="item active">
| |
| <img src="http://bootstrapdesigntools.com/assets/images/1024x400/1.jpg" alt="Lisbon">
| |
| <div class="carousel-caption">The is a new first slide</div>
| |
| </div>
| |
| <div class="item">
| |
| <img src="http://bootstrapdesigntools.com/assets/images/1024x400/2.jpg">
| |
| <div class="carousel-caption">The is the second slide</div>
| |
| </div>
| |
| <div class="item">
| |
| <img src="http://bootstrapdesigntools.com/assets/images/1024x400/3.jpg">
| |
| </div>
| |
| <div class="item">
| |
| <a href="http://google.com" target="_blank" class="carousel-link">
| |
| <img src="/assets/images/1024x400/4.jpg">
| |
| <div class="carousel-caption">Fourth slide</div>
| |
| </a>
| |
| </div>
| |
| <div class="item">
| |
| <a href="http://google.com" class="carousel-link">
| |
| <img src="http://bootstrapdesigntools.com/assets/images/1024x400/5.jpg">
| |
| </a>
| |
| </div>
| |
| </div><a class="left carousel-control" href="#custom-bootstrap-carousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control"
| |
| href="#custom-bootstrap-carousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
| |
| </div> | | </div> |
