From ef818c07999d6ffe403f0af3d27324db39b2eeb6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Nov 2016 23:34:16 -0800 Subject: [PATCH 01/31] Start renaming carousel classes - Un-nests .carousel-item - Appends .carousel-item- to .left, .right, .next, and .prev - Chain .carousel-item to .active where approproriate --- scss/_carousel.scss | 98 +++++++++++++++++++++++---------------------- 1 file changed, 50 insertions(+), 48 deletions(-) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 625ab1c8de..fdfcd87e3a 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -7,76 +7,77 @@ position: relative; width: 100%; overflow: hidden; +} - > .carousel-item { - position: relative; - display: none; - transition: .6s ease-in-out left; +.carousel-item { + position: relative; + display: none; + transition: .6s ease-in-out left; - // Account for jankitude on images - > img, - > a > img { - @extend .img-fluid; - line-height: 1; - } - - // CSS3 transforms when supported by the browser - @include if-supports-3d-transforms() { - transition: transform .6s ease-in-out; - backface-visibility: hidden; - perspective: 1000px; - - &.next, - &.active.right { - left: 0; - transform: translate3d(100%, 0, 0); - } - &.prev, - &.active.left { - left: 0; - transform: translate3d(-100%, 0, 0); - } - &.next.left, - &.prev.right, - &.active { - left: 0; - transform: translate3d(0, 0, 0); - } - } + // Account for jankitude on images + > img, + > a > img { + @extend .img-fluid; + line-height: 1; } - > .active, - > .next, - > .prev { + // CSS3 transforms when supported by the browser + @include if-supports-3d-transforms() { + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; + + &.carousel-item-next, + &.active.carousel-item-right { + left: 0; + transform: translate3d(100%, 0, 0); + } + &.carousel-item-prev, + &.active.carousel-item-left { + left: 0; + transform: translate3d(-100%, 0, 0); + } + &.carousel-item-next.carousel-item-left, + &.carousel-item-prev.carousel-item-right, + &.active { + left: 0; + transform: translate3d(0, 0, 0); + } + } +} + + .carousel-item.active, + .carousel-item-next, + .carousel-item-prev { display: block; } - > .active { + .carousel-item.active { left: 0; } - > .next, - > .prev { + > .carousel-item-next, + > .carousel-item-prev { position: absolute; top: 0; width: 100%; } - > .next { + > .carousel-item-next { left: 100%; } - > .prev { + > .carousel-item-prev { left: -100%; } - > .next.left, - > .prev.right { + > .carousel-item-next.carousel-item-left, + > .carousel-item-prev.carousel-item-right { left: 0; } - > .active.left { + > .active.carousel-item-left { left: -100%; } - > .active.right { + > .active.carousel-item-right { left: 100%; } } @@ -101,10 +102,11 @@ // animation if you trip this while in the middle of another animation. // Set gradients for backgrounds - &.left { + &.carousel-item-left { @include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); } - &.right { + + &.carousel-item-right { right: 0; left: auto; @include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); From 23664d3a9089306b6ef06b944b03f2ccccfc5024 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Nov 2016 23:43:12 -0800 Subject: [PATCH 02/31] fix nesting and syntax error --- scss/_carousel.scss | 59 ++++++++++++++++++++++----------------------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index fdfcd87e3a..9b4d969821 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -46,40 +46,39 @@ } } - .carousel-item.active, - .carousel-item-next, - .carousel-item-prev { - display: block; - } +.carousel-item.active, +.carousel-item-next, +.carousel-item-prev { + display: block; +} - .carousel-item.active { - left: 0; - } +.carousel-item.active { + left: 0; +} - > .carousel-item-next, - > .carousel-item-prev { - position: absolute; - top: 0; - width: 100%; - } +> .carousel-item-next, +> .carousel-item-prev { + position: absolute; + top: 0; + width: 100%; +} - > .carousel-item-next { - left: 100%; - } - > .carousel-item-prev { - left: -100%; - } - > .carousel-item-next.carousel-item-left, - > .carousel-item-prev.carousel-item-right { - left: 0; - } +> .carousel-item-next { + left: 100%; +} +> .carousel-item-prev { + left: -100%; +} +> .carousel-item-next.carousel-item-left, +> .carousel-item-prev.carousel-item-right { + left: 0; +} - > .active.carousel-item-left { - left: -100%; - } - > .active.carousel-item-right { - left: 100%; - } +> .active.carousel-item-left { + left: -100%; +} +> .active.carousel-item-right { + left: 100%; } From ba329cfd6adedf98eebd9c310e3fbefcebf87692 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 19:52:49 -0800 Subject: [PATCH 03/31] redo css more - fix naming of left/right controls - drop the absolute positioning of things and rely on only 3d transforms - remove img styles and require classes to avoid inline-block line-height stuff --- scss/_carousel.scss | 69 +++++++++++++-------------------------------- 1 file changed, 20 insertions(+), 49 deletions(-) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 9b4d969821..12c7f38dfd 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -12,37 +12,13 @@ .carousel-item { position: relative; display: none; - transition: .6s ease-in-out left; - - // Account for jankitude on images - > img, - > a > img { - @extend .img-fluid; - line-height: 1; - } + width: 100%; // CSS3 transforms when supported by the browser @include if-supports-3d-transforms() { transition: transform .6s ease-in-out; backface-visibility: hidden; perspective: 1000px; - - &.carousel-item-next, - &.active.carousel-item-right { - left: 0; - transform: translate3d(100%, 0, 0); - } - &.carousel-item-prev, - &.active.carousel-item-left { - left: 0; - transform: translate3d(-100%, 0, 0); - } - &.carousel-item-next.carousel-item-left, - &.carousel-item-prev.carousel-item-right, - &.active { - left: 0; - transform: translate3d(0, 0, 0); - } } } @@ -52,33 +28,28 @@ display: block; } -.carousel-item.active { - left: 0; -} - -> .carousel-item-next, -> .carousel-item-prev { +.carousel-item-next, +.carousel-item-prev { position: absolute; top: 0; - width: 100%; } -> .carousel-item-next { - left: 100%; -} -> .carousel-item-prev { - left: -100%; -} -> .carousel-item-next.carousel-item-left, -> .carousel-item-prev.carousel-item-right { - left: 0; -} +// CSS3 transforms when supported by the browser +@include if-supports-3d-transforms() { + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + transform: translate3d(0, 0, 0); + } -> .active.carousel-item-left { - left: -100%; -} -> .active.carousel-item-right { - left: 100%; + .carousel-item-next, + .active.carousel-item-right { + transform: translate3d(100%, 0, 0); + } + + .carousel-item-prev, + .active.carousel-item-left { + transform: translate3d(-100%, 0, 0); + } } @@ -101,11 +72,11 @@ // animation if you trip this while in the middle of another animation. // Set gradients for backgrounds - &.carousel-item-left { + &.carousel-control-left { @include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); } - &.carousel-item-right { + &.carousel-control-right { right: 0; left: auto; @include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); From 94e2d80af4554080b286d8b4012f75902932342a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 19:53:16 -0800 Subject: [PATCH 04/31] pull in js changes from #18830 --- js/src/carousel.js | 46 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 32 insertions(+), 14 deletions(-) diff --git a/js/src/carousel.js b/js/src/carousel.js index b7f3b3a7a9..f987fc186b 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -45,7 +45,9 @@ const Carousel = (($) => { const Direction = { NEXT : 'next', - PREVIOUS : 'prev' + PREVIOUS : 'prev', + LEFT : 'left', + RIGHT : 'right' } const Event = { @@ -62,8 +64,10 @@ const Carousel = (($) => { CAROUSEL : 'carousel', ACTIVE : 'active', SLIDE : 'slide', - RIGHT : 'right', - LEFT : 'left', + RIGHT : 'carousel-item-right', + LEFT : 'carousel-item-left', + NEXT : 'carousel-item-next', + PREVIOUS : 'carousel-item-prev', ITEM : 'carousel-item' } @@ -71,7 +75,7 @@ const Carousel = (($) => { ACTIVE : '.active', ACTIVE_ITEM : '.active.carousel-item', ITEM : '.carousel-item', - NEXT_PREV : '.next, .prev', + NEXT_PREV : '.carousel-item-next, .carousel-item-prev', INDICATORS : '.carousel-indicators', DATA_SLIDE : '[data-slide], [data-slide-to]', DATA_RIDE : '[data-ride="carousel"]' @@ -275,10 +279,10 @@ const Carousel = (($) => { } - _triggerSlideEvent(relatedTarget, directionalClassname) { + _triggerSlideEvent(relatedTarget, eventDirectionName) { const slideEvent = $.Event(Event.SLIDE, { relatedTarget, - direction: directionalClassname + direction: eventDirectionName }) $(this._element).trigger(slideEvent) @@ -309,16 +313,30 @@ const Carousel = (($) => { const isCycling = Boolean(this._interval) - const directionalClassName = direction === Direction.NEXT ? - ClassName.LEFT : - ClassName.RIGHT + let directionalClassName + let orderClassName + let eventDirectionName + + if (direction === Direction.NEXT) { + directionalClassName = ClassName.LEFT + orderClassName = ClassName.NEXT + eventDirectionName = Direction.LEFT + } else { + directionalClassName = ClassName.RIGHT + orderClassName = ClassName.PREV + eventDirectionName = Direction.RIGHT + } + + // const directionalClassName = direction === Direction.NEXT ? + // ClassName.LEFT : + // ClassName.RIGHT if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) { this._isSliding = false return } - const slideEvent = this._triggerSlideEvent(nextElement, directionalClassName) + const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName) if (slideEvent.isDefaultPrevented()) { return } @@ -338,13 +356,13 @@ const Carousel = (($) => { const slidEvent = $.Event(Event.SLID, { relatedTarget: nextElement, - direction: directionalClassName + direction: eventDirectionName }) if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.SLIDE)) { - $(nextElement).addClass(direction) + $(nextElement).addClass(orderClassName) Util.reflow(nextElement) @@ -355,13 +373,13 @@ const Carousel = (($) => { .one(Util.TRANSITION_END, () => { $(nextElement) .removeClass(directionalClassName) - .removeClass(direction) + .removeClass(orderClassName) $(nextElement).addClass(ClassName.ACTIVE) $(activeElement) .removeClass(ClassName.ACTIVE) - .removeClass(direction) + .removeClass(orderClassName) .removeClass(directionalClassName) this._isSliding = false From a5c2562c0678135eb778dc8760cb717ddc312b99 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 19:53:37 -0800 Subject: [PATCH 05/31] update left/right classes on controls and add img classes --- docs/components/carousel.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 3942309f0f..025edd4cc2 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 From d57ec902434406534530168547de5db0963011d5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 20:06:45 -0800 Subject: [PATCH 06/31] clear up docs intro --- docs/components/carousel.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 025edd4cc2..03194cdf2a 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 From b0db5788dfee52cf0d52971938b5b1cbc4b7d3b9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 20:07:01 -0800 Subject: [PATCH 07/31] break up example into three separate examples to show flexibility --- docs/components/carousel.md | 69 +++++++++++++++++++++++++++++++++---- 1 file changed, 62 insertions(+), 7 deletions(-) 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 %} - {% 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 From 7c3bda24f0706510bcbb1525a3d07541978c07b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 22:06:29 -0800 Subject: [PATCH 26/31] simplify svg by only using viewbox --- scss/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 6ce7d723a9..50803fc3f7 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -895,8 +895,8 @@ $carousel-caption-color: #fff !default; $carousel-control-icon-width: 20px !default; -$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; +$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; +$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; // 34. Close From e40a09ba2ed6eaf231fb202c253c0f55053b39e6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Dec 2016 22:18:49 -0800 Subject: [PATCH 27/31] 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(-) diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css index a1ec54fa54..58fdde1cb1 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 990553b97a..3f906960ff 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -37,11 +37,7 @@ - -