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 %} -