Widget:Carousel: Difference between revisions
From Jcastle.info
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500"> | <div class="container"> | ||
<h2>Carousel Options</h2> | |||
<p>The <strong>data-wrap</strong> attribute specifies whether the carousel should go through all slides continuously, or stop at the last slide.</p> | |||
<p>In this example, we have set wrap to "false", which will stop the carousel from sliding when the last item is shown.</p> | |||
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500" data-wrap="false"> | |||
<!-- 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> | |||
<li data-target="#myCarousel" data-slide-to="3"></li> | |||
</ol> | |||
<div class="item"> | |||
<!-- Wrapper for slides --> | |||
<div class="carousel-inner" role="listbox"> | |||
<div class="item active"> | |||
<img src="himeji.jpg" alt="Chania" width="460" height="345"> | |||
</div> | |||
<div class="item"> | |||
<img src="akashi.jpg" alt="Chania" width="460" height="345"> | |||
</div> | |||
<div class="item"> | |||
<img src="kinojo.jpg" alt="Flower" width="460" height="345"> | |||
</div> | |||
<div class="item"> | |||
<img src="matsue.jpg" alt="Flower" width="460" height="345"> | |||
</div> | |||
</div> | </div> | ||
<!-- Left and right controls --> | |||
<a class="left carousel-control" href="#myCarousel" 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="#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> | ||
Revision as of 20:39, 23 July 2017
Carousel Options
The data-wrap attribute specifies whether the carousel should go through all slides continuously, or stop at the last slide.
In this example, we have set wrap to "false", which will stop the carousel from sliding when the last item is shown.
