From d118898e07ecbee5bc7bc907f30f8840626f7305 Mon Sep 17 00:00:00 2001
From: mateusbw <39418995+mateusbw@users.noreply.github.com>
Date: Fri, 15 Jul 2022 14:47:21 -0300
Subject: [PATCH] docs: add Carousel no transition example (#6397)

* Add Carousel no transition example

* Fix typo
---
 www/src/examples/Carousel/NoTransition.js | 47 +++++++++++++++++++++++
 www/src/pages/components/carousel.mdx     |  7 ++++
 2 files changed, 54 insertions(+)
 create mode 100644 www/src/examples/Carousel/NoTransition.js

diff --git a/www/src/examples/Carousel/NoTransition.js b/www/src/examples/Carousel/NoTransition.js
new file mode 100644
index 0000000000..a3b49d4bd0
--- /dev/null
+++ b/www/src/examples/Carousel/NoTransition.js
@@ -0,0 +1,47 @@
+import Carousel from 'react-bootstrap/Carousel';
+
+function NoTransitionExample() {
+  return (
+    <Carousel slide={false}>
+      <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>
+  );
+}
+
+export default NoTransitionExample;
diff --git a/www/src/pages/components/carousel.mdx b/www/src/pages/components/carousel.mdx
index 285cc0bc17..d5a35689e2 100644
--- a/www/src/pages/components/carousel.mdx
+++ b/www/src/pages/components/carousel.mdx
@@ -7,6 +7,7 @@ import CarouselUncontrolled from '../../examples/Carousel/Uncontrolled';
 import CarouselFade from '../../examples/Carousel/CarouselFade';
 import IndividualIntervals from '../../examples/Carousel/IndividualIntervals';
 import DarkVariant from '../../examples/Carousel/DarkVariant';
+import NoTransition from '../../examples/Carousel/NoTransition';
 
 <PageHeader
   title="Carousels"
@@ -37,6 +38,12 @@ Add the `fade` prop to your carousel to animate slides with a fade transition in
 
 <ReactPlayground codeText={CarouselFade} />
 
+## No transition animation
+
+Set the `slide` prop to false to disable the transition animation between slides.
+
+<ReactPlayground codeText={NoTransition} />
+
 ## Individual Item Intervals
 
 You can specify individual intervals for each carousel item via the `interval`