diff options
| author | Patrick H. Lauke <[email protected]> | 2017-04-17 13:26:46 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-04-17 13:26:46 +0100 |
| commit | 6ae5fb12e6c996a6526250e8cb703b007e4213fc (patch) | |
| tree | 620408de7fc859370c7abfad37404d0229439e98 /docs | |
| parent | 7ffb61ac5216493bd35a3ff9283f75d58c9ad94f (diff) | |
| download | bootstrap-6ae5fb12e6c996a6526250e8cb703b007e4213fc.tar.xz bootstrap-6ae5fb12e6c996a6526250e8cb703b007e4213fc.zip | |
Fix carousel "hover" behavior on touch-enabled devices
* Add carousel mouse listeners even if touch events enabled
- touch events are enabled not just on "mobile", just also on
touch-enabled desktop/laptop devices; additionally, it's possible to
pair a mouse with traditionally touch-only devices (e.g. Android
phones/tablets); currently, in these situations the carousel WON'T pause
even when using a mouse
* Restart cycle after touchend
as `mouseenter` is fired as part of the touch compatibility events, the
previous change results in carousels which cycle until the user
tapped/interacted with them. after that they stop cycling (as
`mouseleave` is not sent to the carousel after user scrolled/tapped
away).
this fix resets the cycling after `touchend` - essentially returning
to the previous behavior, where on touch the carousel essentially never
pauses, but now with the previous fix it at least pauses correctly for
mouse users on touch-enabled devices.
includes documentation for this new behavior.
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/carousel.md | 3 |
1 files changed, 2 insertions, 1 deletions
diff --git a/docs/components/carousel.md b/docs/components/carousel.md index d1606940a..ab84bf460 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -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> |