feat(docs): update carousel xplat topic

[IMinchev64]

Closes #505

Related samples:

• React: feat(carousel): update carousel samples for new documentation igniteui-react-examples#1098
• WC: feat(carousel): update carousel samples for new documentation igniteui-wc-examples#1262
• Blazor: feat(carousel): update carousel samples for new documentation igniteui-blazor-examples#1303
• Angular: feat(carousel): update carousel samples for new documentation igniteui-angular-samples#4026

Checklist:

• check topic's TOC/menu and paragraph headings
• Include TOC topic labels in the topic content when it has a valuable update, is new, or is considered preview / beta
• link to other topics using ./page.mdx or ../relative/path.mdx (.mdx extension required)
• at the References section at the end of the topic add links to topics, samples, etc
• reference API documentation instead of adding a section with API

• use valid component names - [Data] Grid, IgxSelectComponent, <igx-combo>
• use spell checker tool (VS Code, Grammarly, Microsoft Editor)
• add inline code blocks for the names of classes / tags / properties
• add language descriptor for the code blocks
• check if links function by running the check-api/mdx npm commands
• check if sample is working and fully visible in the topic
• check if sample is working and fully visible in the StackBlitz
• check if code blocks match the code in StackBlitz demo
• add or update meaningful llms.description metadata and run npm run check:llms-metadata

• follow SEO guidelines to fill topic's metadata (SEO guidelines)

• do not resolve requested changes (leave that to the reviewer)

[DiLazarova]

Carousel Review and Test

React = Web Components

1. Let's think of another example for Slide Content Section. The Form is cut from the bottom and it is not visible. The Navigation Arrows are also not visible enough.

2. If possible the carousel to have min top and bottom padding (60pix) in the component frame.

3. Missing examples for some sections:

Angular - no examples available

Blazor - Problem loading the examples

[Marina-L-Stoyanova]

After reviewing the carousel topics, I found a few issues and opportunities for cleanup:

1. Broken Angular getting-started link – The getting-started link for Angular is broken.

2. Incorrect Angular API link – The Angular slide uses IgxSlideComponent, but the API link is currently defined as:
   type="CarouselSlide" member="active" label="active". This means the "active" property in text is displayed as plain text rather than linking to the API.

3. Duplicate platform-specific text in Styling with Tailwind, the intro sentence is word-for-word the same in both blocks. We could move the shared text outside the platform-specific sections and keep only the for each platform.

[Marina-L-Stoyanova]

I tested and reviewed all the links and latest changes, and everything works fine. I only noticed two minor things that could be optimized. Note that they are not blockers and may stay as they are.

1. Animations

Write this sentence once, before the four code blocks:

Set the <ApiLink pkg="core" type="Carousel" member="animationType" label="animationType" /> property to change the slide transition animation.

Then write this sentence once, after the code blocks. The samples can stay per platform:

Set the <ApiLink pkg="core" type="Carousel" member="animationType" label="animationType" /> property to `none` to disable animations.

2. Configuration

Write these sentences once, with the four platform-specific code blocks following each one:

Use the <ApiLink pkg="core" type="Carousel" member="indicatorsOrientation" label="indicatorsOrientation" /> property to change where the indicators are positioned.

Use the <ApiLink pkg="core" type="Carousel" member="vertical" label="vertical" /> property to display the Carousel in vertical mode.

Keep loop/disableLoop and indicators/hideIndicators split, since these use different properties.