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') 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') 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') 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') 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