From: Mark Otto Date: Mon, 5 Dec 2016 04:07:01 +0000 (-0800) Subject: break up example into three separate examples to show flexibility X-Git-Tag: v4.0.0-alpha.6~334^2~25 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b0db5788dfee52cf0d52971938b5b1cbc4b7d3b9;p=thirdparty%2Fbootstrap.git break up example into three separate examples to show flexibility --- diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 03194cdf2a..12c638be81 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 %} -