docs(Carousel): added a crossfade example (#5668)

src/Carousel.tsx

@@ -83,7 +83,7 @@ const propTypes = {
    */
   slide: PropTypes.bool,
 
-  /** Cross fade slides instead of the default slide animation */
+  /** Animates slides with a crossfade animation instead of the default slide animation */
   fade: PropTypes.bool,
 
   /**

www/src/examples/Carousel/CarouselFade.js

@@ -0,0 +1,37 @@
+<Carousel fade>
+  <Carousel.Item>
+    <img
+      className="d-block w-100"
+      src="holder.js/800x400?text=First slide&bg=373940"
+      alt="First slide"
+    />
+    <Carousel.Caption>
+      <h3>First slide label</h3>
+      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+  <Carousel.Item>
+    <img
+      className="d-block w-100"
+      src="holder.js/800x400?text=Second slide&bg=282c34"
+      alt="Second slide"
+    />
+
+    <Carousel.Caption>
+      <h3>Second slide label</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+  <Carousel.Item>
+    <img
+      className="d-block w-100"
+      src="holder.js/800x400?text=Third slide&bg=20232a"
+      alt="Third slide"
+    />
+
+    <Carousel.Caption>
+      <h3>Third slide label</h3>
+      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+</Carousel>;

www/src/pages/components/carousel.mdx

@@ -4,6 +4,7 @@ import ComponentApi from '../../components/ComponentApi';
 import ReactPlayground from '../../components/ReactPlayground';
 import CarouselControlled from '../../examples/Carousel/Controlled';
 import CarouselUncontrolled from '../../examples/Carousel/Uncontrolled';
+import CarouselFade from '../../examples/Carousel/CarouselFade';
 import IndividualIntervals from '../../examples/Carousel/IndividualIntervals';
 
 # Carousels
@@ -30,6 +31,12 @@ You can also _control_ the Carousel state, via the
 
 <ReactPlayground codeText={CarouselControlled} />
 
+## Crossfade
+
+Add the `fade` prop to your carousel to animate slides with a fade transition instead of a slide.
+
+<ReactPlayground codeText={CarouselFade} />
+
 ## Individual Item Intervals
 
 You can specify individual intervals for each carousel item via the `interval`