El Carousel

Carousel Component

Carousel component loops a series of images or texts in a limited space with various display modes.

When to Use

• Image sliders
• Content carousels
• Rotating banners
• Product showcases

Basic Usage

  
    
      {{ item }}
    
  

Motion Blur

  
    
      {{ item }}
    
  

Indicators

  
    
      {{ item }}
    
  

Arrows

  
    
      {{ item }}
    
  

Card Mode

  
    
      {{ item }}
    
  

Vertical

  
    
      {{ item }}
    
  

API Reference

Carousel Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | height | Height of the carousel | string | '' | | initial-index | Index of initially active slide | number | 0 | | trigger | How indicators are triggered | 'hover' \| 'click' | 'hover' | | autoplay | Whether to auto loop | boolean | true | | interval | Interval of auto loop (ms) | number | 3000 | | indicator-position | Position of indicators | '' \| 'none' \| 'outside' | '' | | arrow | When arrows are shown | 'always' \| 'hover' \| 'never' | 'hover' | | type | Type of carousel | '' \| 'card' | '' | | card-scale | Scale of secondary cards in card mode | number | 0.83 | | loop | Display items in loop | boolean | true | | direction | Display direction | 'horizontal' \| 'vertical' | 'horizontal' | | pause-on-hover | Pause autoplay on hover | boolean | true | | motion-blur | Enable motion blur effect | boolean | false |

Carousel Events

| Name | Description | Type | |------|-------------|------| | change | Triggers when active slide switches | (current: number, prev: number) => void |

Carousel Slots

| Name | Description | Subtags | |------|-------------|---------| | default | Customize default content | Carousel-Item |

Carousel Exposes

| Name | Description | Type | |------|-------------|------| | activeIndex | Active slide index | number | | setActiveItem | Manually switch slide | (index: string \| number) => void | | prev | Switch to previous slide | () => void | | next | Switch to next slide | () => void |

CarouselItem Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | name | Name of the item | string | '' | | label | Text for corresponding indicator | string \| number | '' |

Best Practices

1. Use type="card" for product showcases
2. Set motion-blur for smoother transitions
3. Use arrow="always" for better accessibility

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.