- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## BeCarousel 轮播图

### 基础Carousel

    		import { BeCarousel, BeCarouselItem } from '@brewer/beerui'

    <BeCarousel>
    	{#each items as item, i}
    	<BeCarouselItem>
    		<div class='w-full h-full carousel-item' style='background: url({item}) center center / cover no-repeat;'></div>
    	</BeCarouselItem>
    	{/each}
    </BeCarousel>

显示代码

### 基础Carousel，结合图片预览。

    		import { previewImages } from '@brewer/beerui'

    <BeCarousel autoplay={false}>
    	{#each items as item, i}
    	<BeCarouselItem {item}>
    		<div on:click={() => {previewImages(item, items)}} class="w-full h-full carousel-item" data-thing={thing} style="background: url({item}) center center / cover no-repeat;"></div>
    	</BeCarouselItem>
    	{/each}
    </BeCarousel>

显示代码

### 竖直方向的Carousel

    <BeCarousel autoplay={false} direction='vertical' trigger='hover'>
    	{#each items as item, i}
    	<BeCarouselItem>
    		<div class="w-full h-full carousel-item" style="background: url({item}) center center / cover no-repeat;"></div>
    	</BeCarouselItem>
    	{/each}
    </BeCarousel>

显示代码

### 没有动画的Carousel

    <BeCarousel height="450px" autoplay={false} direction='horizontal' arrow='always' trigger='hover' type='none'>
    	{#each items as item, i}
    	<BeCarouselItem>
    		<div class="w-full h-full carousel-item" style="background: url({item}) center center / cover no-repeat;"></div>
    	</BeCarouselItem>
    	{/each}
    </BeCarousel>

显示代码

### 卡片式Carousel

    <BeCarousel height='450px' direction='horizontal' trigger='click' type='card'>
    	{#each items as item, i}
    	<BeCarouselItem>
    		<div class='w-full h-full carousel-item' style='background: url({item}) center center / cover no-repeat;'></div>
    	</BeCarouselItem>
    	{/each}
    </BeCarousel>

显示代码

### BeCarousel Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
direction | 展示的方向 | string | vertical/horizontal | horizontal
loop | 是否循环显示 | boolean | true/false | true
type | 类型 | string | ''/none/card | ''
arrow | 箭头的显示时机 | string | always/hover/never | hover
indicatorPosition | 指示器的位置 | string | outside/none | none
hideIndicator | 隐藏指示器 | boolean | true/false | false
hideArrow | 隐藏箭头 | boolean | true/false | false
interval | 自动切换的时间间隔(ms) | number | - | 3000
autoplay | 自动切换 | boolean | true/false | true
trigger | 指示器的触发方式 | string | 'click'/'hover' | click
initialIndex | 初始状态激活的幻灯片的索引 | number | - | 0
height | 高度 | string | - | 300px

### BeCarousel Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 幻灯片切换时触发 | 目前激活的幻灯片的索引，原幻灯片的索引

### BeCarouselItem Slot

name | 说明
--- | ---
default | 默认slot