Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Add carousel fade option #22958

Merged
merged 6 commits into from
Jan 22, 2018
Merged

Feature: Add carousel fade option #22958

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
72e2314
Move helpful code comments
mdo Jul 1, 2017
a0e2d95
Add .carousel-fade option to Sass
mdo Jul 1, 2017
cf3c15d
Document example of the fade carousel
mdo Jul 1, 2017
30e718c
more logical warning of the .active class on carousel items
mdo Jul 1, 2017
f363215
Merge branch 'v4-dev' into carousel-fade
XhmikosR Nov 1, 2017
fa5785e
Merge branch 'v4-dev' into carousel-fade
mdo Jan 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 30 additions & 7 deletions docs/4.0/components/carousel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Please be aware that nested carousels are not supported, and carousels are gener

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

Expand Down Expand Up @@ -101,12 +101,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-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
Expand Down Expand Up @@ -162,6 +156,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
Expand Down
48 changes: 46 additions & 2 deletions scss/_carousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
//
Expand Down