mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 08:34:08 +02:00
Code Issues Releases Wiki Activity

Merge pull request #21298 from twbs/carousel

Browse Source 
Refactor carousel
This commit is contained in:
Mark Otto
2016-12-05 23:31:14 -08:00
committed by GitHub
parent 306f75216d e0edea0d1a
commit ede925d79b
7 changed files with 240 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
docs/components/carousel.md
View File

@@ -5,7 +5,11 @@ description: A slideshow component for cycling through elements—images or slid
group: components 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.).
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
## Contents ## Contents
@@ -14,32 +18,86 @@ A slideshow component for cycling through elements—images or slides of text—
## Example ## 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. 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.
### 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 %} {% example html %}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</div>
</div>
</div>
{% endexample %}
### With controls
Adding in the previous and next controls:
{% example html %}
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{% endexample %}
### With indicators
You can also add the indicators to the carousel, alongside the controls, too.
{% example html %}
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner" role="listbox"> <div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <div class="carousel-item active">
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide"> <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide"> <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide"> <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</div> </div>
</div> </div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
</div> </div>
@@ -57,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. The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
{% endcallout %} {% 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`.
<div class="bd-example"> <div class="bd-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel"> <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner" role="listbox"> <div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <div class="carousel-item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image"> <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
<div class="carousel-caption"> <div class="carousel-caption d-none d-md-block">
<h3>First slide label</h3> <h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image"> <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
<div class="carousel-caption"> <div class="carousel-caption d-none d-md-block">
<h3>Second slide label</h3> <h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img data-src="holder.js/900x500/auto/#555:#555" alt="Third slide image"> <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
<div class="carousel-caption"> <div class="carousel-caption d-none d-md-block">
<h3>Third slide label</h3> <h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div> </div>
</div> </div>
</div> </div>
<a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev"> <a class="carousel-control carousel-control-left" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span> <span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next"> <a class="carousel-control carousel-control-right" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span> <span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
@@ -105,25 +163,15 @@ Add captions to your slides easily with the `.carousel-caption` element within a
{% highlight html %} {% highlight html %}
<div class="carousel-item"> <div class="carousel-item">
<img src="..." alt="..."> <img src="..." alt="...">
<div class="carousel-caption"> <div class="carousel-caption d-none d-md-block">
<h3>...</h3> <h3>...</h3>
<p>...</p> <p>...</p>
</div> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
{% callout danger %}
#### Accessibility issue
The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
{% endcallout %}
## Usage ## Usage
### Multiple carousels
Carousels require the use of an `id` on the outermost container (the `.carousel`) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's `id`, be sure to update the relevant controls.
### Via data attributes ### Via data attributes
Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`. Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`.

18
docs/examples/carousel/carousel.css
View File

@@ -19,6 +19,7 @@ body {
/* Since positioning the image, we need to help out the caption */ /* Since positioning the image, we need to help out the caption */
.carousel-caption { .carousel-caption {
z-index: 10; z-index: 10;
bottom: 3rem;
} }
/* Declare heights because of positioning of img element */ /* Declare heights because of positioning of img element */
@@ -34,17 +35,12 @@ body {
height: 32rem; height: 32rem;
} }
.carousel-indicators { .carousel-indicators li {
top: 1.5rem; width: .75rem;
right: 1.5rem; height: .75rem;
bottom: auto; margin-right: .25rem;
left: auto; margin-left: .25rem;
width: 1rem; border-radius: 50%;
margin-left: 0;
}
.carousel-indicators > li {
margin-bottom: .25rem;
} }

20
docs/examples/carousel/index.html
View File

@@ -37,11 +37,7 @@
</ul> </ul>
</nav> </nav>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="1"></li>
@@ -51,7 +47,7 @@
<div class="carousel-item active"> <div class="carousel-item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container"> <div class="container">
<div class="carousel-caption text-left"> <div class="carousel-caption d-none d-md-block text-left">
<h1>Example headline.</h1> <h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
@@ -61,7 +57,7 @@
<div class="carousel-item"> <div class="carousel-item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption d-none d-md-block">
<h1>Another example headline.</h1> <h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
@@ -71,7 +67,7 @@
<div class="carousel-item"> <div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container"> <div class="container">
<div class="carousel-caption text-right"> <div class="carousel-caption d-none d-md-block text-right">
<h1>One more for good measure.</h1> <h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
@@ -79,15 +75,15 @@
</div> </div>
</div> </div>
</div> </div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
</div><!-- /.carousel --> </div>
<!-- Marketing messaging and featurettes <!-- Marketing messaging and featurettes

9
docs/migration.md
View File

@@ -183,7 +183,14 @@ Dropped entirely for the new card component.
### Carousel ### Carousel
- Renamed `.item` to `.carousel-item`. - Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
- All CSS has been un-nested and renamed, ensuring each class is prefixed with `.carousel-`.
- For carousel items, `.next`, `.prev`, `.left`, and `.right` are now `.carousel-item-next`, `.carousel-item-prev`, `.carousel-item-left`, and `.carousel-item-right`.
- `.item` is also now `.carousel-item`.
- For prev/next controls, `.carousel-control.right` and `.carousel-control.left` are now `.carousel-control-right` and `.carousel-control-left`, meaning they no longer require a specific base class.
- Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
- Removed image overrides for images in carousel items, deferring to utilities.
- Tweaked the Carousel example to include the new markup and styles.
### Utilities ### Utilities

42
js/src/carousel.js
View File

@@ -45,7 +45,9 @@ const Carousel = (($) => {
const Direction = { const Direction = {
NEXT : 'next', NEXT : 'next',
PREVIOUS : 'prev' PREV : 'prev',
LEFT : 'left',
RIGHT : 'right'
} }
const Event = { const Event = {
@@ -62,8 +64,10 @@ const Carousel = (($) => {
CAROUSEL : 'carousel', CAROUSEL : 'carousel',
ACTIVE : 'active', ACTIVE : 'active',
SLIDE : 'slide', SLIDE : 'slide',
RIGHT : 'right', RIGHT : 'carousel-item-right',
LEFT : 'left', LEFT : 'carousel-item-left',
NEXT : 'carousel-item-next',
PREV : 'carousel-item-prev',
ITEM : 'carousel-item' ITEM : 'carousel-item'
} }
@@ -71,7 +75,7 @@ const Carousel = (($) => {
ACTIVE : '.active', ACTIVE : '.active',
ACTIVE_ITEM : '.active.carousel-item', ACTIVE_ITEM : '.active.carousel-item',
ITEM : '.carousel-item', ITEM : '.carousel-item',
NEXT_PREV : '.next, .prev', NEXT_PREV : '.carousel-item-next, .carousel-item-prev',
INDICATORS : '.carousel-indicators', INDICATORS : '.carousel-indicators',
DATA_SLIDE : '[data-slide], [data-slide-to]', DATA_SLIDE : '[data-slide], [data-slide-to]',
DATA_RIDE : '[data-ride="carousel"]' DATA_RIDE : '[data-ride="carousel"]'
@@ -276,10 +280,10 @@ const Carousel = (($) => {
} }
_triggerSlideEvent(relatedTarget, directionalClassname) { _triggerSlideEvent(relatedTarget, eventDirectionName) {
const slideEvent = $.Event(Event.SLIDE, { const slideEvent = $.Event(Event.SLIDE, {
relatedTarget, relatedTarget,
direction: directionalClassname direction: eventDirectionName
}) })
$(this._element).trigger(slideEvent) $(this._element).trigger(slideEvent)
@@ -310,16 +314,26 @@ const Carousel = (($) => {
const isCycling = Boolean(this._interval) const isCycling = Boolean(this._interval)
const directionalClassName = direction === Direction.NEXT ? let directionalClassName
ClassName.LEFT : let orderClassName
ClassName.RIGHT 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
}
if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) { if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) {
this._isSliding = false this._isSliding = false
return return
} }
const slideEvent = this._triggerSlideEvent(nextElement, directionalClassName) const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName)
if (slideEvent.isDefaultPrevented()) { if (slideEvent.isDefaultPrevented()) {
return return
} }
@@ -339,13 +353,13 @@ const Carousel = (($) => {
const slidEvent = $.Event(Event.SLID, { const slidEvent = $.Event(Event.SLID, {
relatedTarget: nextElement, relatedTarget: nextElement,
direction: directionalClassName direction: eventDirectionName
}) })
if (Util.supportsTransitionEnd() && if (Util.supportsTransitionEnd() &&
$(this._element).hasClass(ClassName.SLIDE)) { $(this._element).hasClass(ClassName.SLIDE)) {
$(nextElement).addClass(direction) $(nextElement).addClass(orderClassName)
Util.reflow(nextElement) Util.reflow(nextElement)
@@ -355,10 +369,10 @@ const Carousel = (($) => {
$(activeElement) $(activeElement)
.one(Util.TRANSITION_END, () => { .one(Util.TRANSITION_END, () => {
$(nextElement) $(nextElement)
.removeClass(`${directionalClassName} ${direction}`) .removeClass(`${directionalClassName} ${orderClassName}`)
.addClass(ClassName.ACTIVE) .addClass(ClassName.ACTIVE)
$(activeElement).removeClass(`${ClassName.ACTIVE} ${direction} ${directionalClassName}`) $(activeElement).removeClass(`${ClassName.ACTIVE} ${orderClassName} ${directionalClassName}`)
this._isSliding = false this._isSliding = false

232
scss/_carousel.scss
View File

@@ -7,77 +7,47 @@
position: relative; position: relative;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
}
> .carousel-item { .carousel-item {
position: relative; position: relative;
display: none; display: none;
@include transition(left .6s ease-in-out); width: 100%;
// 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() { @include if-supports-3d-transforms() {
@include transition(transform .6s ease-in-out); @include transition(transform .6s ease-in-out);
backface-visibility: hidden; backface-visibility: hidden;
perspective: 1000px; perspective: 1000px;
}
}
&.next, .carousel-item.active,
&.active.right { .carousel-item-next,
left: 0; .carousel-item-prev {
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);
}
}
}
> .active,
> .next,
> .prev {
display: block; display: block;
} }
> .active { .carousel-item-next,
left: 0; .carousel-item-prev {
}
> .next,
> .prev {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; }
// 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);
} }
> .next { .carousel-item-next,
left: 100%; .active.carousel-item-right {
} transform: translate3d(100%, 0, 0);
> .prev {
left: -100%;
}
> .next.left,
> .prev.right {
left: 0;
} }
> .active.left { .carousel-item-prev,
left: -100%; .active.carousel-item-left {
} transform: translate3d(-100%, 0, 0);
> .active.right {
left: 100%;
} }
} }
@@ -86,30 +56,18 @@
// Left/right controls for nav // Left/right controls for nav
// //
.carousel-control { .carousel-control-prev,
.carousel-control-next {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0;
width: $carousel-control-width; width: $carousel-control-width;
font-size: $carousel-control-font-size;
color: $carousel-control-color; color: $carousel-control-color;
text-align: center; text-align: center;
text-shadow: $carousel-text-shadow;
opacity: $carousel-control-opacity; opacity: $carousel-control-opacity;
// We can't have this transition here because WebKit cancels the carousel // We can't have a transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation. // animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds
&.left {
@include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
}
&.right {
right: 0;
left: auto;
@include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
}
// Hover/focus state // Hover/focus state
@include hover-focus { @include hover-focus {
color: $carousel-control-color; color: $carousel-control-color;
@@ -117,39 +75,38 @@
outline: 0; outline: 0;
opacity: .9; opacity: .9;
} }
}
.carousel-control-prev {
left: 0;
}
.carousel-control-next {
right: 0;
}
// Toggles // Icons for within
.icon-prev, .carousel-control-prev-icon,
.icon-next { .carousel-control-next-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
z-index: 5; z-index: 5;
display: inline-block; display: inline-block;
width: $carousel-icon-width; width: $carousel-control-icon-width;
height: $carousel-icon-width; height: $carousel-control-icon-width;
margin-top: -($carousel-icon-width / 2); margin-top: -($carousel-control-icon-width / 2);
font-family: serif; font-family: serif;
line-height: 1; line-height: 1;
} background: transparent no-repeat center center;
.icon-prev { background-size: 100% 100%;
}
.carousel-control-prev-icon {
left: 50%; left: 50%;
margin-left: -($carousel-icon-width / 2); margin-left: -($carousel-control-icon-width / 2);
} background-image: $carousel-control-prev-icon-bg;
.icon-next { }
.carousel-control-next-icon {
right: 50%; right: 50%;
margin-right: -($carousel-icon-width / 2); margin-right: -($carousel-control-icon-width / 2);
} background-image: $carousel-control-next-icon-bg;
.icon-prev {
&::before {
content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.icon-next {
&::before {
content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
}
}
} }
@@ -160,36 +117,48 @@
.carousel-indicators { .carousel-indicators {
position: absolute; position: absolute;
right: 0;
bottom: 10px; bottom: 10px;
left: 50%; left: 0;
z-index: 15; z-index: 15;
width: $carousel-indicators-width; padding-left: 0; // override <ul> default
padding-left: 0; // Use the .carousel-control's width as margin so we don't overlay those
margin-left: -($carousel-indicators-width / 2); margin-right: $carousel-control-width;
margin-left: $carousel-control-width;
text-align: center; text-align: center;
list-style: none; list-style: none;
li { li {
position: relative;
display: inline-block; display: inline-block;
width: $carousel-indicator-size; width: $carousel-indicator-width;
height: $carousel-indicator-size; height: $carousel-indicator-height;
margin: 1px;
text-indent: -999px; text-indent: -999px;
cursor: pointer; cursor: pointer;
// IE9 hack for event handling background-color: rgba($carousel-indicator-active-bg, .5);
//
// Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`, // Use pseudo classes to increase the hit area by 10px on top and bottom.
// so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent. &::before {
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer position: absolute;
background-color: rgba(0,0,0,0); // IE9 top: -10px;
border: 1px solid $carousel-indicator-border-color; left: 0;
border-radius: $carousel-indicator-size; display: inline-block;
width: 100%;
height: 10px;
content: "";
}
&::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
} }
.active { .active {
width: $carousel-indicator-active-size;
height: $carousel-indicator-active-size;
margin: 0;
background-color: $carousel-indicator-active-bg; background-color: $carousel-indicator-active-bg;
} }
} }
@@ -209,45 +178,4 @@
padding-bottom: 20px; padding-bottom: 20px;
color: $carousel-caption-color; color: $carousel-caption-color;
text-align: center; text-align: center;
text-shadow: $carousel-text-shadow;
.btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
}
//
// Responsive variations
//
@include media-breakpoint-up(sm) {
// Scale up the controls a smidge
.carousel-control {
.icon-prev,
.icon-next {
width: $carousel-control-sm-up-size;
height: $carousel-control-sm-up-size;
margin-top: -($carousel-control-sm-up-size / 2);
font-size: $carousel-control-sm-up-size;
}
.icon-prev {
margin-left: -($carousel-control-sm-up-size / 2);
}
.icon-next {
margin-right: -($carousel-control-sm-up-size / 2);
}
}
// Show and left align the captions
.carousel-caption {
right: ((100% - $carousel-caption-sm-up-width) / 2);
left: ((100% - $carousel-caption-sm-up-width) / 2);
padding-bottom: 30px;
}
// Move up the indicators
.carousel-indicators {
bottom: 20px;
}
} }

17
scss/_variables.scss
View File

@@ -882,26 +882,21 @@ $media-alignment-padding-x: 10px !default;
// 33. Carousel // 33. Carousel
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
$carousel-control-color: #fff !default; $carousel-control-color: #fff !default;
$carousel-control-width: 15% !default; $carousel-control-width: 15% !default;
$carousel-control-sm-up-size: 30px !default;
$carousel-control-opacity: .5 !default; $carousel-control-opacity: .5 !default;
$carousel-control-font-size: 20px !default;
$carousel-indicators-width: 60% !default; $carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default;
$carousel-indicator-size: 10px !default;
$carousel-indicator-active-size: 12px !default;
$carousel-indicator-active-bg: #fff !default; $carousel-indicator-active-bg: #fff !default;
$carousel-indicator-border-color: #fff !default;
$carousel-caption-width: 70% !default; $carousel-caption-width: 70% !default;
$carousel-caption-sm-up-width: 60% !default;
$carousel-caption-color: #fff !default; $carousel-caption-color: #fff !default;
$carousel-icon-width: 20px !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' 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 // 34. Close