CSS Question: Fade transition for Carousel

Issue description

• components: Carousel
• reactstrap version #5.0.0
• import method es6 (I started with a blank React ES6 app on stackblitz.com)
• react version #16.1.1
• bootstrap version #4.0.0

What should be happening?

I’m trying to create a carousel in reactstrap that has a fade transition rather than the slide transition.

What is happening?

The carousel is rendered invisible. It is still there, occupying space in the layout and cycling through the slides, but nothing is visible.

Steps to reproduce issue

I started with a blank React ES6 app, added only the the carousel example in your docs, and then added custom CSS following this example:

.carousel-fade .carousel-item {
  display: block;
  position: absolute;
  opacity: 0;
  transition: opacity .75s ease-in-out;
}
.carousel-fade .carousel-item.active {
  opacity: 1;
}

html,
body,
.carousel,
.carousel-inner,
.carousel-item {
  width: 100%;
  height: 100%;
}

.carousel {
  position: absolute;
  top: 0;
  left: 0;
}

.carousel-item:nth-child(1) {
  background-color: red;
}
.carousel-item:nth-child(2) {
  background-color: blue;
}
.carousel-item:nth-child(3) {
  background-color: yellow;
}

1. Start with blank React ES6 app on https://stackblitz.com
2. Add dependencies: jquery, popper.js, bootstrap, reactstrap, react-popper, and react-transition-group.
3. In index.js, import bootstrap/dist/css/bootstrap.min.css
4. In index.js, replace App class with code from the Carousel example.
5. Change render() call at the end to render(<Example />, document.getElementById('root'));.
6. Add custom CSS to style.css as mentioned above.
7. Add the following properties to the <Carousel/>:
   • keyboard={false}
   • pause={false}
   • ride="carousel"
   • interval="2000"
   • slide={false}
   • className="carousel-fade"

Error message in console

There are no errors logged to the console.

Code

https://stackblitz.com/edit/carousel-fade?file=index.js

---

Is there a way to create a carousel with a fade transition in reactstrap?

Side note: I don’t understand why Bootstrap has the .carousel-fade class if it requires custom CSS to actually make it fade…

[AustrisC]

Here is the SCSS I came up with for a smooth transition without the white flicker at the beginning.

.carousel-inner {
  .carousel-item {
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    position: absolute;
    transition: opacity 1s ease-in-out;

    &:first-of-type {
      position: relative;
    }
  }

  .active {
    opacity: 1;
  }
}

[jimmy121192]

Just in case someone is still looking for a solution to this issue. Here is my way: just add className=“carousel-fade” in Carousel