From a5c2562c0678135eb778dc8760cb717ddc312b99 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 19:53:37 -0800 Subject: update left/right classes on controls and add img classes --- docs/components/carousel.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/components/carousel.md') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 3942309f0..025edd4cc 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -25,20 +25,20 @@ When building carousels, be sure your slides are the same size as one another. T
- First slide + First slide
- Second slide + Second slide
- Third slide + Third slide
- + Previous - + Next -- cgit v1.2.3 From d57ec902434406534530168547de5db0963011d5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 20:06:45 -0800 Subject: clear up docs intro --- docs/components/carousel.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'docs/components/carousel.md') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 025edd4cc..03194cdf2 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -5,7 +5,11 @@ description: A slideshow component for cycling through elements—images or slid group: components --- -A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.** +The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. + +In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). + +**Nested carousels are not supported.** ## Contents -- cgit v1.2.3 From b0db5788dfee52cf0d52971938b5b1cbc4b7d3b9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 20:07:01 -0800 Subject: break up example into three separate examples to show flexibility --- docs/components/carousel.md | 69 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 62 insertions(+), 7 deletions(-) (limited to 'docs/components/carousel.md') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 03194cdf2..12c638be8 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -18,14 +18,68 @@ In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibilit ## Example -When building carousels, be sure your slides are the same size as one another. The carousel doesn't automatically crop images to the same dimensions for you across slides. +While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. + +Please be aware the carousel doesn't automatically normalize carousel slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. + +### Slides only + +Here's a carousel with slides only. Note the presence of the `.d-block` and `.img-fluid` on carousel images to prevent browser default image alignment. + +{% example html %} + +{% endexample %} + +### With controls + +Adding in the previous and next controls: + +{% example html %} + +{% endexample %} + +### With indicators + +You can also add the indicators to the carousel, alongside the controls, too. {% example html %} - {% endexample %} - {% callout warning %} #### Transition animations not supported in Internet Explorer 9 @@ -116,45 +115,45 @@ Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 does The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible. {% endcallout %} -### Optional captions +### With captions -Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted. +Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/utilities/display-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
- @@ -92,12 +92,12 @@ You can also add the indicators to the carousel, alongside the controls, too. Third slide
- - + + Previous - - + + Next -- cgit v1.2.3 From 4ef547f4bb3d48a2ee17ccdb9c913e1f4f9c7fe3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 23:19:54 -0800 Subject: drop the .carousel-control base class --- docs/components/carousel.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/components/carousel.md') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 6bcd8f796..8dd819fba 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -59,11 +59,11 @@ Adding in the previous and next controls: Third slide - + Previous - + Next @@ -92,11 +92,11 @@ You can also add the indicators to the carousel, alongside the controls, too. Third slide - + Previous - + Next -- cgit v1.2.3 From de1eaef35bfe01ac5ba7f1a40187b381a3155a49 Mon Sep 17 00:00:00 2001 From: Quy Date: Thu, 29 Dec 2016 09:18:59 -0800 Subject: Drop IE9 callout --- docs/components/carousel.md | 6 ------ 1 file changed, 6 deletions(-) (limited to 'docs/components/carousel.md') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 8dd819fba..619ea780f 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -103,12 +103,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 -- cgit v1.2.3 From ff8d28cf2501773ff6f7833865c8e2b2ebb76a3f Mon Sep 17 00:00:00 2001 From: Quy Date: Sat, 31 Dec 2016 16:12:28 -0800 Subject: Move .table-responsive from wrapper to .table --- docs/components/carousel.md | 124 +++++++++++++++++++++----------------------- 1 file changed, 60 insertions(+), 64 deletions(-) (limited to 'docs/components/carousel.md') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 619ea780f..eac86ef81 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -184,50 +184,48 @@ $('.carousel').carousel() Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`. -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
intervalnumber5000The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
keyboardbooleantrueWhether the carousel should react to keyboard events.
pausestring | null"hover"If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to null, hovering over the carousel won't pause it.
ridestringfalseAutoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
wrapbooleantrueWhether the carousel should cycle continuously or have hard stops.
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
intervalnumber5000The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
keyboardbooleantrueWhether the carousel should react to keyboard events.
pausestring | null"hover"If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to null, hovering over the carousel won't pause it.
ridestringfalseAutoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
wrapbooleantrueWhether the carousel should cycle continuously or have hard stops.
### Methods @@ -270,26 +268,24 @@ Bootstrap's carousel class exposes two events for hooking into carousel function All carousel events are fired at the carousel itself (i.e. at the `
`). -
- - - - - - - - - - - - - - - - - -
Event TypeDescription
slide.bs.carouselThis event fires immediately when the slide instance method is invoked.
slid.bs.carouselThis event is fired when the carousel has completed its slide transition.
-
+ + + + + + + + + + + + + + + + + +
Event TypeDescription
slide.bs.carouselThis event fires immediately when the slide instance method is invoked.
slid.bs.carouselThis event is fired when the carousel has completed its slide transition.
{% highlight js %} $('#myCarousel').on('slide.bs.carousel', function () { -- cgit v1.2.3 From 7d48a5b27c5de16604d5d747e88322b65f1524b5 Mon Sep 17 00:00:00 2001 From: Quy Date: Sat, 31 Dec 2016 23:09:45 -0800 Subject: Fix carousel markup --- docs/components/carousel.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/components/carousel.md') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index eac86ef81..ea22f3ef9 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -143,12 +143,12 @@ Add captions to your slides easily with the `.carousel-caption` element within a
- - + + Previous - - + + Next -- cgit v1.2.3 From c72a315740c852152c1bc6a34bf2b4c2372fe389 Mon Sep 17 00:00:00 2001 From: Johann Date: Wed, 22 Mar 2017 22:42:13 +0100 Subject: Carousel - Add attributes from and to for Slid and Slide events (#21668) Carousel - Add attributes from and to for Slid and Slide events --- docs/components/carousel.md | 2 ++ 1 file changed, 2 insertions(+) (limited to 'docs/components/carousel.md') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index ea22f3ef9..24a42a617 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -265,6 +265,8 @@ 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 `
`). -- cgit v1.2.3 From 7c4ed09da25fbb1bcf74900473ef335fce34fe75 Mon Sep 17 00:00:00 2001 From: Gifford Nowland Date: Wed, 22 Mar 2017 15:02:56 -0700 Subject: fix data-pause documentation for carousel (#21938) fix data-pause documentation for carousel --- docs/components/carousel.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components/carousel.md') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 24a42a617..5649dfac9 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -208,9 +208,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap pause - string | null + string | boolean "hover" - If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to null, hovering over the carousel won't pause it. + If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. ride -- cgit v1.2.3 From 48c5efa4c3c439d8720b8475ec3e372c6974a12a Mon Sep 17 00:00:00 2001 From: Pierre Vanduynslager Date: Tue, 28 Mar 2017 17:43:16 -0400 Subject: Fix JS components console error "Error: is transitioning" --- docs/components/carousel.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'docs/components/carousel.md') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 5649dfac9..405aee18c 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -229,6 +229,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### 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. @@ -249,15 +252,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 -- cgit v1.2.3 From ee5dc37ba3b7bde0155b7e18a89f32d66d2d05ee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 15:21:43 -0700 Subject: drop img-fluid for w-100 --- docs/components/carousel.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) (limited to 'docs/components/carousel.md') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 405aee18c..e75484316 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -30,13 +30,13 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.im @@ -50,13 +50,13 @@ Adding in the previous and next controls: