mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00
Code Issues Releases Wiki 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
2 changed files with 76 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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
//