diff options
| author | Mark Otto <[email protected]> | 2017-04-21 23:36:24 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-04-21 23:36:24 -0700 |
| commit | 5463d8436b6404f5c647fb12e0cd0eafa4abf5e0 (patch) | |
| tree | ada6f9b1f4990a182d829055ee079db9601dbf9b /docs/components/carousel.md | |
| parent | 7efe4ddee499396efc40f53d1421b61fe5da328d (diff) | |
| parent | 638b97f19c4df6f51475f8088555e3eefd2b986f (diff) | |
| download | bootstrap-5463d8436b6404f5c647fb12e0cd0eafa4abf5e0.tar.xz bootstrap-5463d8436b6404f5c647fb12e0cd0eafa4abf5e0.zip | |
Merge branch 'v4-dev' into form-tweaks
Diffstat (limited to 'docs/components/carousel.md')
| -rw-r--r-- | docs/components/carousel.md | 11 |
1 files changed, 6 insertions, 5 deletions
diff --git a/docs/components/carousel.md b/docs/components/carousel.md index e75484316..ab84bf460 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -28,7 +28,7 @@ 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 w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> </div> @@ -48,7 +48,7 @@ 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 w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> </div> @@ -81,7 +81,7 @@ 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 w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide"> </div> @@ -120,7 +120,7 @@ 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 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"> @@ -210,7 +210,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <td>pause</td> <td>string | boolean</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>false</code>, hovering over the carousel won't pause it.</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> |