diff options
Diffstat (limited to 'docs/components/carousel.md')
| -rw-r--r-- | docs/components/carousel.md | 182 |
1 files changed, 89 insertions, 93 deletions
diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 8dd819fba..af00dc526 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -28,15 +28,15 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.im {% example html %} <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> - <div class="carousel-inner" role="listbox"> + <div class="carousel-inner"> <div class="carousel-item active"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> </div> </div> </div> @@ -48,15 +48,15 @@ Adding in the previous and next controls: {% example html %} <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> - <div class="carousel-inner" role="listbox"> + <div class="carousel-inner"> <div class="carousel-item active"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> @@ -81,15 +81,15 @@ You can also add the indicators to the carousel, alongside the controls, too. <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> - <div class="carousel-inner" role="listbox"> + <div class="carousel-inner"> <div class="carousel-item active"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> @@ -104,12 +104,6 @@ You can also add the indicators to the carousel, alongside the controls, too. {% endexample %} {% callout warning %} -#### Transition animations not supported in Internet Explorer 9 - -Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 doesn't support the necessary CSS properties. Thus, there are no slide transition animations when using that browser. We have intentionally decided not to include jQuery-based fallbacks for the transitions. -{% endcallout %} - -{% callout warning %} #### Initial active element required The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible. @@ -126,35 +120,35 @@ Add captions to your slides easily with the `.carousel-caption` element within a <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> </ol> - <div class="carousel-inner" role="listbox"> + <div class="carousel-inner"> <div class="carousel-item active"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> <div class="carousel-caption d-none d-md-block"> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> <div class="carousel-caption d-none d-md-block"> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="carousel-item"> - <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> + <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> <div class="carousel-caption d-none d-md-block"> <h3>Third slide label</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> - <a class="carousel-control carousel-control-left" href="#carouselExampleCaptions" role="button" data-slide="prev"> - <span class="icon-prev" aria-hidden="true"></span> + <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> + <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control carousel-control-right" href="#carouselExampleCaptions" role="button" data-slide="next"> - <span class="icon-next" aria-hidden="true"></span> + <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> @@ -190,53 +184,55 @@ $('.carousel').carousel() Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 50px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>interval</td> - <td>number</td> - <td>5000</td> - <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td> - </tr> - <tr> - <td>keyboard</td> - <td>boolean</td> - <td>true</td> - <td>Whether the carousel should react to keyboard events.</td> - </tr> - <tr> - <td>pause</td> - <td>string | null</td> - <td>"hover"</td> - <td>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>null</code>, hovering over the carousel won't pause it.</td> - </tr> - <tr> - <td>ride</td> - <td>string</td> - <td>false</td> - <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td> - </tr> - <tr> - <td>wrap</td> - <td>boolean</td> - <td>true</td> - <td>Whether the carousel should cycle continuously or have hard stops.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>interval</td> + <td>number</td> + <td>5000</td> + <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td> + </tr> + <tr> + <td>keyboard</td> + <td>boolean</td> + <td>true</td> + <td>Whether the carousel should react to keyboard events.</td> + </tr> + <tr> + <td>pause</td> + <td>string | boolean</td> + <td>"hover"</td> + <td><p>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p> + <p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td> + </tr> + <tr> + <td>ride</td> + <td>string</td> + <td>false</td> + <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td> + </tr> + <tr> + <td>wrap</td> + <td>boolean</td> + <td>true</td> + <td>Whether the carousel should cycle continuously or have hard stops.</td> + </tr> + </tbody> +</table> ### Methods +{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %} +{{ callout-include | markdownify }} + #### `.carousel(options)` Initializes the carousel with an optional options `object` and starts cycling through items. @@ -257,15 +253,15 @@ Stops the carousel from cycling through items. #### `.carousel(number)` -Cycles the carousel to a particular frame (0 based, similar to an array). +Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (i.e. before the `slid.bs.carousel` event occurs). #### `.carousel('prev')` -Cycles to the previous item. +Cycles to the previous item. **Returns to the caller before the previous item has been shown** (i.e. before the `slid.bs.carousel` event occurs). #### `.carousel('next')` -Cycles to the next item. +Cycles to the next item. **Returns to the caller before the next item has been shown** (i.e. before the `slid.bs.carousel` event occurs). ### Events @@ -273,29 +269,29 @@ Bootstrap's carousel class exposes two events for hooking into carousel function - `direction`: The direction in which the carousel is sliding (either `"left"` or `"right"`). - `relatedTarget`: The DOM element that is being slid into place as the active item. +- `from`: The index of the current item +- `to`: The index of the next item All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`). -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>slide.bs.carousel</td> - <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td> - </tr> - <tr> - <td>slid.bs.carousel</td> - <td>This event is fired when the carousel has completed its slide transition.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>slide.bs.carousel</td> + <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td> + </tr> + <tr> + <td>slid.bs.carousel</td> + <td>This event is fired when the carousel has completed its slide transition.</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myCarousel').on('slide.bs.carousel', function () { |