kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Feature: Add carousel fade option (#22958)

Browse source 
* 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:
Mark Otto 2018-01-21 22:51:08 -08:00 committed by GitHub
parent d402183014
commit 663057d441
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
docs/4.0/components/carousel.md
View file

@ -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.
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
@ -103,12 +103,6 @@ You can also add the indicators to the carousel, alongside the controls, too.
</div>
{% 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/). 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>
{% 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
### Via data attributes

48
scss/_carousel.scss
View file

@ -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);
@ -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
//