diff options
Diffstat (limited to 'docs/_includes/js/carousel.html')
| -rw-r--r-- | docs/_includes/js/carousel.html | 41 |
1 files changed, 29 insertions, 12 deletions
diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html index 945910c75..728356268 100644 --- a/docs/_includes/js/carousel.html +++ b/docs/_includes/js/carousel.html @@ -10,7 +10,7 @@ <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> - <div class="carousel-inner"> + <div class="carousel-inner" role="listbox"> <div class="item active"> <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide"> </div> @@ -21,11 +21,13 @@ <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide"> </div> </div> - <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> + <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> </a> - <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> + <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> </a> </div> </div><!-- /example --> @@ -39,22 +41,30 @@ </ol> <!-- Wrapper for slides --> - <div class="carousel-inner"> + <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> + <div class="item"> + <img src="..." alt="..."> + <div class="carousel-caption"> + ... + </div> + </div> ... </div> <!-- Controls --> - <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> + <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> </a> - <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> + <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> </a> </div> {% endhighlight %} @@ -73,7 +83,7 @@ <li data-target="#carousel-example-captions" data-slide-to="1"></li> <li data-target="#carousel-example-captions" data-slide-to="2"></li> </ol> - <div class="carousel-inner"> + <div class="carousel-inner" role="listbox"> <div class="item active"> <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image"> <div class="carousel-caption"> @@ -96,16 +106,18 @@ </div> </div> </div> - <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev"> + <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> </a> - <a class="right carousel-control" href="#carousel-example-captions" data-slide="next"> + <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> </a> </div> </div><!-- /example --> {% highlight html %} -<div class="item active"> +<div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> @@ -122,11 +134,11 @@ <h2 id="carousel-usage">Usage</h2> <h3>Multiple carousels</h3> - <p>Carousels require the use of an <code>id</code> on the outermost container, <code>.carousel</code>, for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p> + <p>Carousels require the use of an <code>id</code> on the outermost container (the <code>.carousel</code>) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p> <h3>Via data attributes</h3> <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p> - <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load.</p> + <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load. <strong class="text-danger">It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.</strong></p> <h3>Via JavaScript</h3> <p>Call carousel manually with:</p> @@ -197,6 +209,11 @@ $('.carousel').carousel({ <h3>Events</h3> <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p> + <p>Both events have the following additional properties:</p> + <ul> + <li><code>direction</code>: The direction in which the carousel is sliding (either <code>"left"</code> or <code>"right"</code>).</li> + <li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li> + </ul> <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> |