diff --git a/src/packages/components/Informations/Mores/Carousel/config.ts b/src/packages/components/Informations/Mores/Carousel/config.ts
new file mode 100644
index 00000000..78a6f284
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Carousel/config.ts
@@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { CarouselConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import logo from '@/assets/logo.png'
+
+// 示例图片资源
+const modules = import.meta.globEager("./images/*");
+const dataset = [logo]
+for (var item in modules) {
+ dataset.push(modules[item].default)
+}
+
+export const option = {
+ // 图片资源列表
+ dataset: dataset,
+ // 自动播放
+ autoplay: true,
+ // 自动播放的间隔（ms）
+ interval: 5000,
+ // 每页显示的图片数量
+ slidesPerview: 1,
+ // 轮播方向
+ direction: "horizontal",
+ // 拖曳切换
+ draggable: true,
+ // 居中显示
+ centeredSlides: false,
+ // 过渡效果
+ effect: "slide",
+ // 是否显示指示点
+ showDots: true,
+ // 指示器样式
+ dotType: "dot",
+ // 指示器位置
+ dotPlacement: "bottom",
+ // 显示箭头
+ showArrow: false,
+ // 图片样式
+ fit: "contain",
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+ public key = CarouselConfig.key
+ public chartConfig = cloneDeep(CarouselConfig)
+ public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Informations/Mores/Carousel/config.vue b/src/packages/components/Informations/Mores/Carousel/config.vue
new file mode 100644
index 00000000..da3f7492
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Carousel/config.vue
@@ -0,0 +1,176 @@
+<template>
+ <collapse-item name="属性" :expanded="true">
+ <setting-item-box name="路径" :alone="true">
+ <setting-item v-for="item, index in optionData.dataset" :key="index">
+ <n-input-group>
+ <n-input v-model:value="optionData.dataset[index]" size="small" placeholder="请输入图片地址"></n-input>
+ <n-button ghost @click="optionData.dataset.splice(index, 1)">
+ -
+ </n-button>
+ </n-input-group>
+ </setting-item>
+ <setting-item>
+ <n-button size="small" @click="optionData.dataset.push('')">
+ +
+ </n-button>
+ </setting-item>
+ </setting-item-box>
+ <setting-item-box name="播放器">
+ <setting-item>
+ <n-space>
+ <n-switch v-model:value="optionData.autoplay" size="small" />
+ <n-text>自动播放</n-text>
+ </n-space>
+ </setting-item>
+ <!-- 开启自动播放时，设置间隔时间 -->
+ <setting-item name="间隔时间">
+ <n-input-number v-model:value="optionData.interval" size="small" placeholder=""></n-input-number>
+ </setting-item>
+ <setting-item name="轮播方向">
+ <n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
+ </setting-item>
+ <setting-item name="过渡效果">
+ <n-select v-model:value="optionData.effect" :options="effects" placeholder="效果" />
+ </setting-item>
+ <setting-item name="每页数量">
+ <n-input-number v-model:value="optionData.slidesPerview" size="small" placeholder=""></n-input-number>
+ </setting-item>
+ <setting-item>
+ <n-space>
+ <n-switch v-model:value="optionData.centeredSlides" size="small" />
+ <n-text>居中显示</n-text>
+ </n-space>
+ </setting-item>
+ <setting-item name="图片样式">
+ <n-select v-model:value="optionData.fit" :options="fitList" placeholder="样式" />
+ </setting-item>
+ </setting-item-box>
+
+ <setting-item-box name="指示器">
+ <setting-item name="样式">
+ <n-select v-model:value="optionData.dotType" :options="dotTypes" placeholder="选择样式" />
+ </setting-item>
+ <setting-item name="位置">
+ <n-select v-model:value="optionData.dotPlacement" :options="dotPlacements" placeholder="选择位置" />
+ </setting-item>
+ <setting-item>
+ <n-space>
+ <n-switch v-model:value="optionData.showDots" size="small" />
+ <n-text>显示</n-text>
+ </n-space>
+ </setting-item>
+ <setting-item>
+ <n-space>
+ <n-switch v-model:value="optionData.showArrow" size="small" />
+ <n-text>箭头</n-text>
+ </n-space>
+ </setting-item>
+ <setting-item>
+ <n-space>
+ <n-switch v-model:value="optionData.draggable" size="small" />
+ <n-text>拖曳切换</n-text>
+ </n-space>
+ </setting-item>
+ </setting-item-box>
+
+ </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import {
+ CollapseItem,
+ SettingItemBox,
+ SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+ optionData: {
+ type: Object as PropType<typeof option>,
+ required: true
+ }
+})
+
+// 字典
+const dotTypes = [
+ {
+ label: "点",
+ value: "dot"
+ },
+ {
+ label: "线",
+ value: "line"
+ }
+]
+const directions = [
+ {
+ label: "水平方向",
+ value: "horizontal"
+ },
+ {
+ label: "垂直方向",
+ value: "vertical"
+ }
+]
+const effects = [
+ {
+ label: "slide",
+ value: "slide"
+ },
+ {
+ label: "fade",
+ value: "fade"
+ },
+ {
+ label: "card",
+ value: "card"
+ },
+ {
+ label: "custom",
+ value: "custom"
+ }
+]
+const dotPlacements = [
+ {
+ label: "上边",
+ value: "top"
+ },
+ {
+ label: "下边",
+ value: "bottom"
+ },
+ {
+ label: "左边",
+ value: "left"
+ },
+ {
+ label: "右边",
+ value: "right"
+ }
+]
+
+// 适应类型
+const fitList = [
+ {
+ value: 'fill',
+ label: 'fill'
+ },
+ {
+ value: 'contain',
+ label: 'contain'
+ },
+ {
+ value: 'cover',
+ label: 'cover'
+ },
+ {
+ value: 'scale-down',
+ label: 'scale-down'
+ },
+ {
+ value: 'none',
+ label: 'none'
+ },
+]
+</script>
diff --git a/src/packages/components/Informations/Mores/Carousel/images/carousel.png b/src/packages/components/Informations/Mores/Carousel/images/carousel.png
new file mode 100644
index 00000000..95f366b1
Binary files /dev/null and b/src/packages/components/Informations/Mores/Carousel/images/carousel.png differ
diff --git a/src/packages/components/Informations/Mores/Carousel/images/carousel2.png b/src/packages/components/Informations/Mores/Carousel/images/carousel2.png
new file mode 100644
index 00000000..d8a6859f
Binary files /dev/null and b/src/packages/components/Informations/Mores/Carousel/images/carousel2.png differ
diff --git a/src/packages/components/Informations/Mores/Carousel/index.ts b/src/packages/components/Informations/Mores/Carousel/index.ts
new file mode 100644
index 00000000..fbb8d35c
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Carousel/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const CarouselConfig: ConfigType = {
+ key: 'Carousel',
+ chartKey: 'VCarousel',
+ conKey: 'VCCarousel',
+ title: '轮播图',
+ category: ChatCategoryEnum.MORE,
+ categoryName: ChatCategoryEnumName.MORE,
+ package: PackagesCategoryEnum.INFORMATIONS,
+ chartFrame: ChartFrameEnum.NAIVE_UI,
+ image: 'photo.png'
+}
diff --git a/src/packages/components/Informations/Mores/Carousel/index.vue b/src/packages/components/Informations/Mores/Carousel/index.vue
new file mode 100644
index 00000000..3018fbc2
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Carousel/index.vue
@@ -0,0 +1,47 @@
+<template>
+ <div>
+ <n-carousel :autoplay="autoplay" :interval="interval" :centered-slides="centeredSlides" :direction="direction"
+ :dot-placement="dotPlacement" :dot-type="dotType" :draggable="draggable" :effect="effect"
+ :slides-per-view="slidesPerview" :show-arrow="showArrow" :show-dots="showDots">
+ <n-image v-for="url in option.dataset" :object-fit="fit" preview-disabled :src="url"
+ :fallback-src="requireErrorImg()" :width="w" :height="h"></n-image>
+ </n-carousel>
+ </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+ chartConfig: {
+ type: Object as PropType<CreateComponentType>,
+ required: true
+ }
+})
+
+const option = shallowReactive({
+ dataset: configOption.dataset
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { autoplay, interval, slidesPerview, direction, draggable, centeredSlides, effect, dotType, dotPlacement, showArrow, showDots, fit } = toRefs(props.chartConfig.option)
+
+watch(
+ () => props.chartConfig.option.dataset,
+ (newData: any) => {
+ option.dataset = newData
+ },
+ {
+ immediate: true,
+ deep: false
+ }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+ option.dataset = newData
+})
+</script>
diff --git a/src/packages/components/Informations/Mores/index.ts b/src/packages/components/Informations/Mores/index.ts
index 8fadc441..0e842ce0 100644
--- a/src/packages/components/Informations/Mores/index.ts
+++ b/src/packages/components/Informations/Mores/index.ts
@@ -2,5 +2,6 @@ import { ImageConfig } from './Image/index'
import { IframeConfig } from './Iframe/index'
import { VideoConfig } from './Video/index'
import { WordCloudConfig } from './WordCloud/index'
+import { CarouselConfig } from './Carousel/index'
-export default [WordCloudConfig, ImageConfig, VideoConfig, IframeConfig]
+export default [WordCloudConfig, ImageConfig, VideoConfig, IframeConfig, CarouselConfig]