Skip to content

Commit

Permalink
docs: updated KCarousel document (#453)
Browse files Browse the repository at this point in the history 
* docs: updated KCarousel document

* docs: remove redundant character

* docs: updated kcarousel document
  • Loading branch information
@Onion-L
Onion-L authored Nov 18, 2024
1 parent 2a4952e commit 106d096
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 12 deletions.
31 changes: 19 additions & 12 deletions docs/components/KCarousel.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,20 +55,27 @@ Sometimes you may want to customize indicator and arrow.

<demo src="carousel/custom.svelte" github='Carousel'></demo>

## Vertical Layout

The carousel component supports vertical layout.

<demo src="carousel/vertical.svelte" github='Carousel'></demo>

## Carousel Props

| Name | Type | Default | Description |
| ------------ | -------------------------------- | ------- | -------------------------------------------------------------------------------------------- |
| height | `number` | `'-` | Height of the carousel. |
| initialIndex | `number` | `0` | The default display index of carousel (starting from 0). |
| count | `number` | `0` | Specifies the number of carousels to display, it is required. |
| arrow | `'always' \| 'hover' \| 'never'` | `hover` | How the arrow paginator is displayed. |
| loop | `boolean` | `true` | Whether to loop play. |
| autoplay | `boolean` | `true` | Whether to play through automatic page turning. |
| pauseOnHover | `boolean` | `true` | When the mouse moves over the carousel, the automatic page turning playback will be paused.. |
| interval | `number` | `3000` | Automatic page turning playback interval (unit ms). |
| cls | `string` | `''` | Additional class for component |
| attrs | `Record<string, string>` | `{}` | Additional attributes |
| Name | Type | Default | Description |
| ------------ | -------------------------------- | ------------ | -------------------------------------------------------------------------------------------- |
| height | `number` | `-` | Height of the carousel. |
| initialIndex | `number` | `0` | The default display index of carousel (starting from 0). |
| count | `number` | `0` | Specifies the number of carousels to display, it is required. |
| arrow | `'always' \| 'hover' \| 'never'` | `hover` | How the arrow paginator is displayed. |
| loop | `boolean` | `true` | Whether to loop play. |
| direction | `'horizontal' \| 'vertical'` | `horizontal` | The direction of the carousel. |
| autoplay | `boolean` | `true` | Whether to play through automatic page turning. |
| pauseOnHover | `boolean` | `true` | When the mouse moves over the carousel, the automatic page turning playback will be paused.. |
| interval | `number` | `3000` | Automatic page turning playback interval (unit ms). |
| cls | `string` | `''` | Additional class for component |
| attrs | `Record<string, string>` | `{}` | Additional attributes |

## Carousel Events

Expand Down
12 changes: 12 additions & 0 deletions docs/example/carousel/vertical.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<script lang="ts">
import { KCarousel } from '@ikun-ui/carousel';
</script>

<KCarousel direction="vertical" count={6} initialIndex={0}>
<div style:height="280px" class="bg-orange-100 fcc text-black"><h1>0</h1></div>
<div style:height="280px" class="bg-orange-200 fcc text-black"><h1>1</h1></div>
<div style:height="280px" class="bg-orange-100 fcc text-black"><h1>2</h1></div>
<div style:height="280px" class="bg-orange-200 fcc text-black"><h1>3</h1></div>
<div style:height="280px" class="bg-orange-100 fcc text-black"><h1>4</h1></div>
<div style:height="280px" class="bg-orange-200 fcc text-black"><h1>5</h1></div>
</KCarousel>

0 comments on commit 106d096

Please sign in to comment.