From 72e231433cf8e85b7f10fccfda977975e2ad3c87 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 1 Jul 2017 16:52:27 -0700 Subject: [PATCH 1/4] Move helpful code comments --- scss/_carousel.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 6d16039b5bd6..4dcad62040d9 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -1,4 +1,13 @@ -// Wrapper for the slide container and indicators +// Notes on the classes: +// +// 1. The .carousel-item-left and .carousel-item-right is used to indicate where +// the active slide is heading. +// 2. .active.carousel-item is the current slide. +// 3. .active.carousel-item-left and .active.carousel-item-right is the current +// slide in it's in-transition state. Only one of these occur at a time. +// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right +// is the upcoming slide in transition. + .carousel { position: relative; } @@ -31,7 +40,6 @@ top: 0; } -// CSS3 transforms when supported by the browser .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translateX(0); From a0e2d9513a3e5d4b9c07a608a1b6870cde7c38eb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 1 Jul 2017 16:52:35 -0700 Subject: [PATCH 2/4] Add .carousel-fade option to Sass --- scss/_carousel.scss | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 4dcad62040d9..85194792ed1e 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -68,6 +68,42 @@ } +// +// Alternate transitions +// + +.carousel-fade { + .carousel-item { + opacity: 0; + transition-duration: .6s; + transition-property: opacity; + } + + .carousel-item.active, + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + opacity: 1; + } + + .active.carousel-item-left, + .active.carousel-item-right { + opacity: 0; + } + + .carousel-item-next, + .carousel-item-prev, + .carousel-item.active, + .active.carousel-item-left, + .active.carousel-item-prev { + transform: translateX(0); + + @supports (transform-style: preserve-3d) { + transform: translate3d(0, 0, 0); + } + } +} + + // // Left/right controls for nav // From cf3c15da5a544c8454a09a9f8aeb9099398c477c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 1 Jul 2017 16:52:46 -0700 Subject: [PATCH 3/4] Document example of the fade carousel --- docs/4.0/components/carousel.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md index 0846a68be11c..9ba69e0b49e5 100644 --- a/docs/4.0/components/carousel.md +++ b/docs/4.0/components/carousel.md @@ -162,6 +162,35 @@ Add captions to your slides easily with the `.carousel-caption` element within a {% endhighlight %} +### Crossfade + +Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide. + +{% example html %} + +{% endexample %} + + ## Usage ### Via data attributes From 30e718c66cbcf860a9e93445eeb797bf782e9d62 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 1 Jul 2017 16:52:58 -0700 Subject: [PATCH 4/4] more logical warning of the .active class on carousel items --- docs/4.0/components/carousel.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md index 9ba69e0b49e5..dec3f607343d 100644 --- a/docs/4.0/components/carousel.md +++ b/docs/4.0/components/carousel.md @@ -18,7 +18,7 @@ Please be aware that nested carousels are not supported, and carousels are gener Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. -Be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. +**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. ### Slides only @@ -101,12 +101,6 @@ You can also add the indicators to the carousel, alongside the controls, too. {% endexample %} -{% callout warning %} -#### Initial active element required - -The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible. -{% endcallout %} - ### With captions 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 }}/docs/{{ site.docs_version }}/utilities/display-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.