mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-29 21:52:22 +01:00
Mark Otto
GitHub
commit
ede925d79b
@ -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.).
|
||||
|
||||
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
|
||||
|
||||
## Contents
|
||||
|
||||
@ -14,32 +18,86 @@ A slideshow component for cycling through elements—images or slides of text—
|
||||
|
||||
## 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 %}
|
||||
<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">
|
||||
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner" role="listbox">
|
||||
<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 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 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>
|
||||
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
|
||||
<span class="icon-prev" aria-hidden="true"></span>
|
||||
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
|
||||
<span class="icon-next" aria-hidden="true"></span>
|
||||
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</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.
|
||||
{% 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 id="carousel-example-captions" class="carousel slide" data-ride="carousel">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
|
||||
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner" role="listbox">
|
||||
<div class="carousel-item active">
|
||||
<img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
|
||||
<div class="carousel-caption">
|
||||
<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 d-none d-md-block">
|
||||
<h3>First slide label</h3>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image">
|
||||
<div class="carousel-caption">
|
||||
<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 d-none d-md-block">
|
||||
<h3>Second slide label</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img data-src="holder.js/900x500/auto/#555:#555" alt="Third slide image">
|
||||
<div class="carousel-caption">
|
||||
<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 d-none d-md-block">
|
||||
<h3>Third slide label</h3>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
</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="sr-only">Previous</span>
|
||||
</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="sr-only">Next</span>
|
||||
</a>
|
||||
@ -105,25 +163,15 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
||||
{% highlight html %}
|
||||
<div class="carousel-item">
|
||||
<img src="..." alt="...">
|
||||
<div class="carousel-caption">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h3>...</h3>
|
||||
<p>...</p>
|
||||
</div>
|
||||
</div>
|
||||
{% 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
|
||||
|
||||
### 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
|
||||
|
||||
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`.
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -37,11 +37,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Carousel
|
||||
================================================== -->
|
||||
<div id="myCarousel" class="carousel slide" data-ride="carousel">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
@ -51,7 +47,7 @@
|
||||
<div class="carousel-item active">
|
||||
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-left">
|
||||
<div class="carousel-caption d-none d-md-block text-left">
|
||||
<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><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
|
||||
@ -61,7 +57,7 @@
|
||||
<div class="carousel-item">
|
||||
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<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><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
|
||||
@ -71,7 +67,7 @@
|
||||
<div class="carousel-item">
|
||||
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
|
||||
<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>
|
||||
<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>
|
||||
@ -79,15 +75,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div><!-- /.carousel -->
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Marketing messaging and featurettes
|
||||
|
||||
@ -183,7 +183,14 @@ Dropped entirely for the new card component.
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
@ -45,7 +45,9 @@ const Carousel = (($) => {
|
||||
|
||||
const Direction = {
|
||||
NEXT : 'next',
|
||||
PREVIOUS : 'prev'
|
||||
PREV : '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',
|
||||
PREV : '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"]'
|
||||
@ -276,10 +280,10 @@ const Carousel = (($) => {
|
||||
}
|
||||
|
||||
|
||||
_triggerSlideEvent(relatedTarget, directionalClassname) {
|
||||
_triggerSlideEvent(relatedTarget, eventDirectionName) {
|
||||
const slideEvent = $.Event(Event.SLIDE, {
|
||||
relatedTarget,
|
||||
direction: directionalClassname
|
||||
direction: eventDirectionName
|
||||
})
|
||||
|
||||
$(this._element).trigger(slideEvent)
|
||||
@ -310,16 +314,26 @@ 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
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
@ -339,13 +353,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,10 +369,10 @@ const Carousel = (($) => {
|
||||
$(activeElement)
|
||||
.one(Util.TRANSITION_END, () => {
|
||||
$(nextElement)
|
||||
.removeClass(`${directionalClassName} ${direction}`)
|
||||
.removeClass(`${directionalClassName} ${orderClassName}`)
|
||||
.addClass(ClassName.ACTIVE)
|
||||
|
||||
$(activeElement).removeClass(`${ClassName.ACTIVE} ${direction} ${directionalClassName}`)
|
||||
$(activeElement).removeClass(`${ClassName.ACTIVE} ${orderClassName} ${directionalClassName}`)
|
||||
|
||||
this._isSliding = false
|
||||
|
||||
|
||||
@ -7,77 +7,47 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> .carousel-item {
|
||||
position: relative;
|
||||
display: none;
|
||||
@include transition(left .6s ease-in-out);
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
display: none;
|
||||
width: 100%;
|
||||
|
||||
// Account for jankitude on images
|
||||
> img,
|
||||
> a > img {
|
||||
@extend .img-fluid;
|
||||
line-height: 1;
|
||||
}
|
||||
@include if-supports-3d-transforms() {
|
||||
@include transition(transform .6s ease-in-out);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
// CSS3 transforms when supported by the browser
|
||||
@include if-supports-3d-transforms() {
|
||||
@include transition(transform .6s ease-in-out);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
.carousel-item.active,
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
position: absolute;
|
||||
top: 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,
|
||||
> .next,
|
||||
> .prev {
|
||||
display: block;
|
||||
.carousel-item-next,
|
||||
.active.carousel-item-right {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
> .active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
> .next,
|
||||
> .prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .next {
|
||||
left: 100%;
|
||||
}
|
||||
> .prev {
|
||||
left: -100%;
|
||||
}
|
||||
> .next.left,
|
||||
> .prev.right {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
> .active.left {
|
||||
left: -100%;
|
||||
}
|
||||
> .active.right {
|
||||
left: 100%;
|
||||
.carousel-item-prev,
|
||||
.active.carousel-item-left {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -86,30 +56,18 @@
|
||||
// Left/right controls for nav
|
||||
//
|
||||
|
||||
.carousel-control {
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: $carousel-control-width;
|
||||
font-size: $carousel-control-font-size;
|
||||
color: $carousel-control-color;
|
||||
text-align: center;
|
||||
text-shadow: $carousel-text-shadow;
|
||||
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.
|
||||
|
||||
// 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
|
||||
@include hover-focus {
|
||||
color: $carousel-control-color;
|
||||
@ -117,39 +75,38 @@
|
||||
outline: 0;
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev {
|
||||
left: 0;
|
||||
}
|
||||
.carousel-control-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Toggles
|
||||
.icon-prev,
|
||||
.icon-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 5;
|
||||
display: inline-block;
|
||||
width: $carousel-icon-width;
|
||||
height: $carousel-icon-width;
|
||||
margin-top: -($carousel-icon-width / 2);
|
||||
font-family: serif;
|
||||
line-height: 1;
|
||||
}
|
||||
.icon-prev {
|
||||
left: 50%;
|
||||
margin-left: -($carousel-icon-width / 2);
|
||||
}
|
||||
.icon-next {
|
||||
right: 50%;
|
||||
margin-right: -($carousel-icon-width / 2);
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
}
|
||||
// Icons for within
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 5;
|
||||
display: inline-block;
|
||||
width: $carousel-control-icon-width;
|
||||
height: $carousel-control-icon-width;
|
||||
margin-top: -($carousel-control-icon-width / 2);
|
||||
font-family: serif;
|
||||
line-height: 1;
|
||||
background: transparent no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.carousel-control-prev-icon {
|
||||
left: 50%;
|
||||
margin-left: -($carousel-control-icon-width / 2);
|
||||
background-image: $carousel-control-prev-icon-bg;
|
||||
}
|
||||
.carousel-control-next-icon {
|
||||
right: 50%;
|
||||
margin-right: -($carousel-control-icon-width / 2);
|
||||
background-image: $carousel-control-next-icon-bg;
|
||||
}
|
||||
|
||||
|
||||
@ -160,36 +117,48 @@
|
||||
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
left: 0;
|
||||
z-index: 15;
|
||||
width: $carousel-indicators-width;
|
||||
padding-left: 0;
|
||||
margin-left: -($carousel-indicators-width / 2);
|
||||
padding-left: 0; // override <ul> default
|
||||
// Use the .carousel-control's width as margin so we don't overlay those
|
||||
margin-right: $carousel-control-width;
|
||||
margin-left: $carousel-control-width;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $carousel-indicator-size;
|
||||
height: $carousel-indicator-size;
|
||||
margin: 1px;
|
||||
width: $carousel-indicator-width;
|
||||
height: $carousel-indicator-height;
|
||||
text-indent: -999px;
|
||||
cursor: pointer;
|
||||
// IE9 hack for event handling
|
||||
//
|
||||
// Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`,
|
||||
// so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
|
||||
background-color: rgba(0,0,0,0); // IE9
|
||||
border: 1px solid $carousel-indicator-border-color;
|
||||
border-radius: $carousel-indicator-size;
|
||||
background-color: rgba($carousel-indicator-active-bg, .5);
|
||||
|
||||
// Use pseudo classes to increase the hit area by 10px on top and bottom.
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
content: "";
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
width: $carousel-indicator-active-size;
|
||||
height: $carousel-indicator-active-size;
|
||||
margin: 0;
|
||||
background-color: $carousel-indicator-active-bg;
|
||||
}
|
||||
}
|
||||
@ -209,45 +178,4 @@
|
||||
padding-bottom: 20px;
|
||||
color: $carousel-caption-color;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -882,26 +882,21 @@ $media-alignment-padding-x: 10px !default;
|
||||
|
||||
// 33. Carousel
|
||||
|
||||
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
|
||||
|
||||
$carousel-control-color: #fff !default;
|
||||
$carousel-control-width: 15% !default;
|
||||
$carousel-control-sm-up-size: 30px !default;
|
||||
$carousel-control-opacity: .5 !default;
|
||||
$carousel-control-font-size: 20px !default;
|
||||
|
||||
$carousel-indicators-width: 60% !default;
|
||||
|
||||
$carousel-indicator-size: 10px !default;
|
||||
$carousel-indicator-active-size: 12px !default;
|
||||
$carousel-indicator-width: 30px !default;
|
||||
$carousel-indicator-height: 3px !default;
|
||||
$carousel-indicator-active-bg: #fff !default;
|
||||
$carousel-indicator-border-color: #fff !default;
|
||||
|
||||
$carousel-caption-width: 70% !default;
|
||||
$carousel-caption-sm-up-width: 60% !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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user