mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-06 04:08:22 +01:00
Feature: Add carousel fade option (#22958)
* Move helpful code comments * Add .carousel-fade option to Sass * Document example of the fade carousel * more logical warning of the .active class on carousel items
This commit is contained in:
parent
d402183014
commit
663057d441
@ -20,7 +20,7 @@ Lastly, if you're building our JavaScript from source, it [requires `util.js`]({
|
|||||||
|
|
||||||
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.
|
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
|
### Slides only
|
||||||
|
|
||||||
@ -103,12 +103,6 @@ You can also add the indicators to the carousel, alongside the controls, too.
|
|||||||
</div>
|
</div>
|
||||||
{% endexample %}
|
{% 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
|
### 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/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
|
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/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
|
||||||
@ -164,6 +158,35 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
### Crossfade
|
||||||
|
|
||||||
|
Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide.
|
||||||
|
|
||||||
|
{% example html %}
|
||||||
|
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active">
|
||||||
|
<img class="d-block w-100" 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 w-100" 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 w-100" 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="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Next</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endexample %}
|
||||||
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Via data attributes
|
### Via data attributes
|
||||||
|
@ -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 {
|
.carousel {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@ -31,7 +40,6 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// CSS3 transforms when supported by the browser
|
|
||||||
.carousel-item-next.carousel-item-left,
|
.carousel-item-next.carousel-item-left,
|
||||||
.carousel-item-prev.carousel-item-right {
|
.carousel-item-prev.carousel-item-right {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
@ -60,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
|
// Left/right controls for nav
|
||||||
//
|
//
|
||||||
|
Loading…
x
Reference in New Issue
Block a user