updated carousel docs.

apps/website/src/pages/docs/carousel.mdx

@@ -14,40 +14,40 @@ import * as AllExamples from 'examples';
 
 <p>{frontmatter.description}</p>
 
-<Placeholder componentPageName='core--carousel' />
-
 <LiveExample src='Carousel.main.tsx'>
   <AllExamples.CarouselMainExample client:load />
 </LiveExample>
 
 The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
-located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides.
+located below the slides, consisting of "dots" ([Carousel.DotsList](#dots-list)) and "previous"/"next" ([Carousel.Navigation](#navigation)) buttons, used for changing slides.
 
 The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
 
 ## Usage
 
-Carousels can be controlled externally by using the properties `activeSlideIndex` and `onSlideChange`.
+### Controlled State
+
+By default, the carousel maintains its own state. But it can also be controlled externally using `activeSlideIndex` and `onSlideChange`.
 
 <LiveExample src='Carousel.controlled.tsx'>
   <AllExamples.CarouselControlledExample client:load />
 </LiveExample>
 
-The subcomponents can be used outside of Carousel. The following example shows how `Carousel.DotsList` can be used without the `Carousel` component. Clicking on the right half of the slide will advance the carousel to the next slide, whereas clicking on the left half will go to the previous slide.
+### Only Dots
+
+`Carousel.DotsList` can be used without the `Carousel` component. Here is an example to demonstrate this where clicking on the right/left half of the slide will go one slide forward/backward.
 
 <LiveExample src='Carousel.onlyDots.tsx'>
   <AllExamples.CarouselOnlyDotsExample client:load />
 </LiveExample>
 
 ## Props
 
-Properties table is to be defined.
-
 <PropsTable path={frontmatter.propsPath} />
 
 ## Subcomponents
 
-This component uses a composition approach so it should be used with the provided subcomponents.
+This component uses a composition approach, similar to most of the other components.
 
 ### Slider
 
@@ -61,14 +61,18 @@ This component uses a composition approach so it should be used with the provide
 
 ### Navigation
 
-The `Carousel.Navigation` component by default consists of the `PreviousButton` and `NextButton` shown on the left and right, and the `Carousel.DotsList` component shown in the middle. `children` can be specified to override what is shown in this navigation section.
+The `Carousel.Navigation` component by default consists of the `PreviousButton` and `NextButton` shown on the left and right and the `Carousel.DotsList` component shown in the middle. `children` can be specified to override what is shown in this navigation section.
+
+**Important**: The navigation section must always be present before the slides in DOM order.
 
 <PropsTable path={'@itwin/itwinui-react/esm/core/Carousel/CarouselNavigation.d.ts'} />
 
 ### Dots List
 
 The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. If used as a descendant of `Carousel`, then this component does not need any props or `children`. The props can be specified if this component is being used outside `Carousel`. `children` can be specified to override the individual dots that are shown.
 
+**Important**: The component must always be present before the slides in DOM order.
+
 <PropsTable path={'@itwin/itwinui-react/esm/core/Carousel/CarouselDotsList.d.ts'} />
 
 ### Dot