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') 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') 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') 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 e40a09ba2ed6eaf231fb202c253c0f55053b39e6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 22:18:49 -0800 Subject: redo the carousel example to match --- docs/examples/carousel/carousel.css | 18 +++++++----------- docs/examples/carousel/index.html | 20 ++++++++------------ 2 files changed, 15 insertions(+), 23 deletions(-) (limited to 'docs') diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css index a1ec54fa5..58fdde1cb 100644 --- a/docs/examples/carousel/carousel.css +++ b/docs/examples/carousel/carousel.css @@ -19,6 +19,7 @@ body { /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; + bottom: 3rem; } /* Declare heights because of positioning of img element */ @@ -34,17 +35,12 @@ body { height: 32rem; } -.carousel-indicators { - top: 1.5rem; - right: 1.5rem; - bottom: auto; - left: auto; - width: 1rem; - margin-left: 0; -} - -.carousel-indicators > li { - margin-bottom: .25rem; +.carousel-indicators li { + width: .75rem; + height: .75rem; + margin-right: .25rem; + margin-left: .25rem; + border-radius: 50%; } diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index 990553b97..3f906960f 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -37,11 +37,7 @@ - -