From 60a8dd4873e55abd4559289b6bd14783d063c58f Mon Sep 17 00:00:00 2001
From: Roading <sevensoft@yeah.net>
Date: Sat, 4 Dec 2021 14:59:21 +0800
Subject: [PATCH 1/2] docs: add carousel en doc

---
 .../docs/en-US/components/carousel/index.md   | 192 ++++++++++++++++++
 1 file changed, 192 insertions(+)
 create mode 100644 packages/devui-vue/docs/en-US/components/carousel/index.md

diff --git a/packages/devui-vue/docs/en-US/components/carousel/index.md b/packages/devui-vue/docs/en-US/components/carousel/index.md
new file mode 100644
index 00000000..4f99dce9
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/carousel/index.md
@@ -0,0 +1,192 @@
+# Carousel
+
+An area of carousel.
+
+### When To Use
+
+Used to display images or cards.
+
+### Basic Usage
+
+:::demo
+
+```vue
+<template>
+  <d-carousel height="200px">
+    <d-carousel-item v-for="item in items" :key="item">{{ item }}</d-carousel-item>
+  </d-carousel>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4'])
+    return {
+      items
+    }
+  }
+})
+</script>
+<style>
+.d-carousel-item {
+  text-align: center;
+  line-height: 200px;
+  background: var(--devui-global-bg, #f3f6f8);
+}
+</style>
+```
+
+:::
+
+### Indicator&Toggle-Arrow
+
+If arrowTrigger is set to always, the arrow is permanently displayed. If dotTrigger is set to hover, it will switched when hover to the dots.
+
+:::demo
+
+```vue
+<template>
+  <d-carousel height="200px" arrowTrigger="always" dotTrigger="hover">
+    <d-carousel-item v-for="item in items" :key="item">{{ item }}</d-carousel-item>
+  </d-carousel>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4'])
+    return {
+      items
+    }
+  }
+})
+</script>
+<style>
+.d-carousel-item {
+  text-align: center;
+  line-height: 200px;
+  background: var(--devui-global-bg, #f3f6f8);
+}
+</style>
+```
+
+:::
+
+### Automatic-NVOD
+
+:::demo
+
+```vue
+<template>
+  <d-carousel height="200px" autoplay :autoplaySpeed="3000">
+    <d-carousel-item v-for="item in items" :key="item">{{ item }}</d-carousel-item>
+  </d-carousel>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4'])
+    return {
+      items
+    }
+  }
+})
+</script>
+<style>
+.d-carousel-item {
+  text-align: center;
+  line-height: 200px;
+  background: var(--devui-global-bg, #f3f6f8);
+}
+</style>
+```
+
+:::
+
+### Custom-Operations
+
+:::demo
+
+```vue
+<template>
+  <d-carousel ref="carousel" height="200px" arrowTrigger="never">
+    <d-carousel-item v-for="item in items" :key="item">{{ item }}</d-carousel-item>
+  </d-carousel>
+  <div class="carousel-demo-operate">
+    <d-button bsStyle="common" @click="onPrev">Prev</d-button>
+    <d-button bsStyle="primary" @click="onNext">Next</d-button>
+    <d-button bsStyle="common" @click="onGoFirst">First</d-button>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4'])
+    const carousel = ref()
+    const onPrev = () => {
+      carousel.value?.prev?.()
+    }
+    const onNext = () => {
+      carousel.value?.next?.()
+    }
+    const onGoFirst = () => {
+      carousel.value?.goto?.(0)
+    }
+    return {
+      items,
+      carousel,
+      onPrev,
+      onNext,
+      onGoFirst
+    }
+  }
+})
+</script>
+<style>
+.carousel-demo-operate {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
+.carousel-demo-operate .devui-btn-host {
+  margin-right: 20px;
+}
+</style>
+```
+
+:::
+
+### API
+
+#### parameter
+
+|   Parameter   |             Type             | Default | Description | Jump to Demo |
+| :----------------: | :-----------: | :--------------------------: | :-----: | :---------------------------------------------- |
+| arrowTrigger  | `'hover'\|'never'\|'always'` | 'hover' | Optional. Specifying the display mode of the switching arrow | [Indicator & Toggle Arrow](#indicator-toggle-arrow) |
+|   autoplay    |          `boolean`           |  false  | Optional. Indicating whether to enable automatic NVOD. | [Automatic NVOD](#automatic-nvod) |
+| autoplaySpeed |          `number`            |  3000   | Optional. Automatic NVOD speed, in ms. This parameter is used together with `autoplay'. | [Automatic NVOD](#automatic-nvod) |
+|    height     |          `string`            | '100%'  | Optional. NVOD container height | [Basic usage](#basic-usage) |
+|   showDots    |          `boolean`           |  true   | Optional. Indicating whether to display the panel indicator | [Automatic NVOD](#automatic-nvod) |
+|  dotPosition  |       `'top'\|'bottom'`      |'bottom' | Optional. Indicator position on the panel | [Indicator & Toggle Arrow](#indicator-toggle-arrow) |
+|  dotTrigger   |       `click'\|'hover'`      | 'click' | Optional. The indicator triggers the NVOD mode | [Indicator & Toggle Arrow](#indicator-toggle-arrow) |
+|  activeIndex  |          `number`            |    0    | Optional. Initializes the activation card index, starting from 0. `[(activeIndex)]` bidirectional binding is supported. | [Basic usage](#basic-usage) |
+
+#### event
+
+| Event | Type | Description | Jump to Demo |
+| :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------------------- |
+| activeIndexChange | `EventEmitter<number>` | Returns the index of the current card when the card is switched. The index starts from 0. | [Basic usage](#basic-usage) |
+
+#### 方法
+
+| Method | Description | Jump to Demo |
+| :---------: | :---------------------------------- | :----------------------------- |
+| prev() | Switch to the previous card | [Custom Operations](#custom-operations) |
+| next() | Switch to the next card | [Custom Operations](#custom-operations) |
+| goTo(index) | Switch to the card with a specified index. The index starts from 0. | [Custom Operations](#custom-operations) |
\ No newline at end of file
-- 
Gitee


From b76acff83b2dfc5febbf9816f00042e72cb5710b Mon Sep 17 00:00:00 2001
From: Roading <sevensoft@yeah.net>
Date: Fri, 10 Dec 2021 22:04:00 +0800
Subject: [PATCH 2/2] fix: translate carousel en doc

---
 packages/devui-vue/docs/en-US/components/carousel/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devui-vue/docs/en-US/components/carousel/index.md b/packages/devui-vue/docs/en-US/components/carousel/index.md
index 4f99dce9..8beb2d92 100644
--- a/packages/devui-vue/docs/en-US/components/carousel/index.md
+++ b/packages/devui-vue/docs/en-US/components/carousel/index.md
@@ -183,7 +183,7 @@ export default defineComponent({
 | :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------------------- |
 | activeIndexChange | `EventEmitter<number>` | Returns the index of the current card when the card is switched. The index starts from 0. | [Basic usage](#basic-usage) |
 
-#### 方法
+#### method
 
 | Method | Description | Jump to Demo |
 | :---------: | :---------------------------------- | :----------------------------- |
-- 
Gitee