# Carousel

A versatile component for displaying a collection of content in a rotating sequence with navigation.

### **Import**
```tsx
import { Carousel } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Carousel } from '@app-studio/web';
import { View } from 'app-studio';
import { Text } from 'app-studio';

export const DefaultDemo = () => {
  // Create an array of slides with different background colors
  const slides = [
    { color: 'color-blue-500', text: 'Slide 1' },
    { color: 'color-green-500', text: 'Slide 2' },
    { color: 'color-purple-500', text: 'Slide 3' },
    { color: 'color-orange-500', text: 'Slide 4' },
  ];

  return (
    <View height="300px" width="100%">
      <Carousel>
        {slides.map((slide, index) => (
          <View
            key={index}
            backgroundColor={slide.color}
            width="100%"
            height="100%"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Text color="white" fontSize="24px" fontWeight="bold">
              {slide.text}
            </Text>
          </View>
        ))}
      </Carousel>
    </View>
  );
};
```

### **autoPlay**
Enables or disables automatic slide progression.

- **Type:** `boolean`
- **Default:** `false`
- **Possible Values:** ``

```tsx
import React from 'react';
import { Carousel } from '@app-studio/web';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';

export const AutoPlayDemo = () => {
  // Create an array of slides with different background colors
  const slides = [
    { color: 'color-red-500', text: 'Auto-play Slide 1' },
    { color: 'color-yellow-500', text: 'Auto-play Slide 2' },
    { color: 'color-teal-500', text: 'Auto-play Slide 3' },
    { color: 'color-pink-500', text: 'Auto-play Slide 4' },
  ];

  return (
    <View height="300px" width="100%">
      <Carousel autoPlay autoPlayInterval={2000} pauseOnHover>
        {slides.map((slide, index) => (
          <Vertical
            key={index}
            backgroundColor={slide.color}
            width="100%"
            height="100%"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Text color="white" fontSize="24px" fontWeight="bold">
              {slide.text}
            </Text>
            <Text color="white" fontSize="16px" marginTop="10px">
              Auto-advances every 2 seconds. Hover to pause.
            </Text>
          </Vertical>
        ))}
      </Carousel>
    </View>
  );
};
```

### **stepIndices**
An optional array of indices that define specific steps or points in the carousel navigation.

- **Type:** `number[]`
- **Possible Values:** ``

```tsx
import React, { useState } from 'react';
import { Carousel } from '@app-studio/web';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Horizontal } from 'app-studio';
import { Button } from '@app-studio/web';

export const StepIndicesDemo = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  // Create an array of slides
  const slides = [
    { color: 'color-blue-500', text: 'Introduction', id: 0 },
    { color: 'color-gray-400', text: 'Step 1', id: 1 },
    { color: 'color-gray-400', text: 'Step 2', id: 2 },
    { color: 'color-gray-400', text: 'Step 3', id: 3 },
    { color: 'color-gray-400', text: 'Step 4', id: 4 },
    { color: 'color-green-500', text: 'Summary', id: 5 },
  ];

  // Only allow navigation to specific slides (introduction, steps 2 & 4, summary)
  const stepIndices = [0, 2, 4, 5];

  return (
    <View>
      <Text fontWeight="bold" marginBottom={2}>
        Step Navigation (Only specific slides)
      </Text>
      <View height="300px" width="100%">
        <Carousel
          activeIndex={activeIndex}
          onChange={setActiveIndex}
          stepIndices={stepIndices}
          showIndicators={false}
        >
          {slides.map((slide, index) => (
            <View
              key={index}
              backgroundColor={
                stepIndices.includes(index) ? slide.color : 'color-gray-400'
              }
              width="100%"
              height="100%"
              display="flex"
              alignItems="center"
              justifyContent="center"
              flexDirection="column"
              gap={4}
            >
              <Text color="white" fontSize="24px" fontWeight="bold">
                {slide.text}
              </Text>
              <Text color="white" fontSize="16px">
                {stepIndices.includes(index)
                  ? 'This is an allowed step'
                  : 'This slide is skipped in navigation'}
              </Text>
            </View>
          ))}
        </Carousel>
      </View>

      <Horizontal justifyContent="center" gap={4} marginTop={4}>
        {stepIndices.map((index) => (
          <Button
            key={index}
            onClick={() => setActiveIndex(index)}
            variant={activeIndex === index ? 'filled' : 'outline'}
          >
            {slides[index].text}
          </Button>
        ))}
      </Horizontal>
    </View>
  );
};
```