rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Overhaul carousel a bit more:

Browse source 
* Drop custom type arrow controls for glyphicons icons instead for more consistent rendering
* Remove the captions and instead let folks implement what they want in the carousel
* Move the indicators to the bottom middle instead of top right
* Lighten up gradients on the edges for less harsh lighting
This commit is contained in:
Mark Otto 2013-02-16 01:22:15 -08:00
parent b688d8dcd4
commit d8e2668c1d
5 changed files with 90 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

22
docs/javascript.html
View file

@ -1481,32 +1481,20 @@ $('#myCollapsible').on('hidden', function () {
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>
<img data-src="holder.js/900x500/auto/#777:#fff/text:First slide" alt="">
</div>
<div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
</div>
<img data-src="holder.js/900x500/auto/#777:#fff/text:Second slide" alt="">
</div>
<div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
<img data-src="holder.js/900x500/auto/#777:#fff/text:Third slide" alt="">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="control">&lsaquo;</span>
<span class="glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="control">&rsaquo;</span>
<span class="glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- /example -->