diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index 53d07417..4b74f683 100644
--- a/docs/components/carousel.md
+++ b/docs/components/carousel.md
@@ -119,6 +119,45 @@ Use the `pagination` attribute to show the total number of slides and the curren
```
+```jsx react
+import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+```
+
### Navigation
Use the `navigation` attribute to show previous and next buttons.
@@ -158,6 +197,45 @@ Use the `navigation` attribute to show previous and next buttons.
```
+```jsx react
+import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+```
+
### Looping
By default, the carousel will not advanced beyond the first and last slides. You can change this behavior and force the carousel to "wrap" with the `loop` attribute.
@@ -197,6 +275,45 @@ By default, the carousel will not advanced beyond the first and last slides. You
```
+```jsx react
+import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+```
+
### Autoplay
The carousel will automatically advance when the `autoplay` attribute is used. To change how long a slide is shown before advancing, set `autoplay-interval` to the desired number of milliseconds. For best results, use the `loop` attribute when autoplay is enabled. Note that autoplay will pause while the user interacts with the carousel.
@@ -236,6 +353,45 @@ The carousel will automatically advance when the `autoplay` attribute is used. T
```
+```jsx react
+import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+```
+
### Mouse Dragging
The carousel uses [scroll snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap) to position slides at various snap positions. This allows users to scroll through the slides very naturally, especially on touch devices. Unfortunately, desktop users won't be able to click and drag with a mouse, which can feel unnatural. Adding the `mouse-dragging` attribute can help with this.
@@ -293,12 +449,64 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s
```
+```jsx react
+import { useState } from 'react';
+import { SlCarousel, SlCarouselItem, SlDivider, SlSwitch } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+ const [isEnabled, setIsEnabled] = useState(false);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setIsEnabled(!isEnabled)}>
+ Enable mouse dragging
+
+ >
+ );
+};
+```
+
### Multiple Slides Per View
The `slides-per-view` attribute makes it possible to display multiple slides at a time. You can also use the `slides-per-move` attribute to advance more than once slide at a time, if desired.
```html preview
-
+
Slide 1
Slide 2
Slide 3
@@ -312,13 +520,13 @@ The `slides-per-view` attribute makes it possible to display multiple slides at
import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
-
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
+
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+ Slide 5
+ Slide 6
);
```
@@ -571,7 +779,7 @@ const App = () => (
Use the `--aspect-ratio` custom property to customize the size of the carousel's viewport.
```html preview
-
+
{
- const [scrollPadding, setScrollPadding] = useState(10);
-
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setScrollPadding(event.target.valueAsNumber)}
- />
-
- >
- );
-};
+const App = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+);
```
### Gallery Example