更新记录

1.0.0（2026-03-19） 下载此版本

初始版本发布

平台兼容性

uni-app(5.0)

uni-app x(5.0)

carson-carousel

轮播图组件，支持手势滑动、自动播放、指示器等功能。

使用方式

<template>
  <view>
    <carson-carousel :autoplay="true" :show-indicators="true">
      <carson-carousel-item>
        <image src="/static/banner1.jpg" />
      </carson-carousel-item>
      <carson-carousel-item>
        <image src="/static/banner2.jpg" />
      </carson-carousel-item>
      <carson-carousel-item>
        <image src="/static/banner3.jpg" />
      </carson-carousel-item>
    </carson-carousel>
  </view>
</template>

属性说明

事件说明

插槽说明

暴露方法

代码示例

基础使用

<carson-carousel>
  <carson-carousel-item>
    <image src="/static/banner1.jpg" />
  </carson-carousel-item>
  <carson-carousel-item>
    <image src="/static/banner2.jpg" />
  </carson-carousel-item>
</carson-carousel>

显示指示器

<carson-carousel :show-indicators="true">
  <carson-carousel-item>
    <image src="/static/banner1.jpg" />
  </carson-carousel-item>
  <carson-carousel-item>
    <image src="/static/banner2.jpg" />
  </carson-carousel-item>
</carson-carousel>

自定义指示器

<carson-carousel :show-indicators="true">
  <carson-carousel-item>
    <image src="/static/banner1.jpg" />
  </carson-carousel-item>
  <carson-carousel-item>
    <image src="/static/banner2.jpg" />
  </carson-carousel-item>
  <template #indicator="{ current, total, select }">
    <view class="custom-indicators">
      <view 
        v-for="(item, index) in total" 
        :key="index"
        class="custom-dot"
        :class="{ active: current === index }"
        @tap="select(index)"
      ></view>
    </view>
  </template>
</carson-carousel>