Skip to content
My Docs

Carousel 图片走马灯

基本用法

图片走马灯 可以实现多图片的无限滚动展示，可以根据需要设置滚动方向、滚动速度和图片大小。

log
log
log
log
log
log
log
log
log
log
log
log
log
log

注：此处受文档样式影响图片大小不一致、动画不连续 ，去除.sl-markdown-content的宽高样式即可


<Carousel
imgs = {[
  "https://img.alicdn.com/imgextra/i1/O1CN019O0Fcd27j6to9Vt7U_!!6000000007832-2-tps-195-134.png",
  "https://img.alicdn.com/imgextra/i1/O1CN01GqMYP21Xjj7xttIj0_!!6000000002960-0-tps-700-383.jpg",
  "https://img.alicdn.com/imgextra/i2/O1CN019Wc4cj1wAnRlUGyOa_!!6000000006268-0-tps-665-500.jpg",
  "https://img.alicdn.com/imgextra/i3/O1CN01FDriPl1JMSW5AX3XM_!!6000000001014-0-tps-960-640.jpg",
  "https://img.alicdn.com/imgextra/i3/O1CN01aZRCpD1muSmiuOESn_!!6000000005014-2-tps-112-134.png",
  "https://img.alicdn.com/imgextra/i3/O1CN01zeG94b1GEizHD8BC7_!!6000000000591-2-tps-118-134.png",
  "https://img.alicdn.com/imgextra/i4/O1CN01GDpRdg1GQAtBdB53c_!!6000000000616-2-tps-151-134.png",
  "https://img.alicdn.com/imgextra/i3/O1CN01ohI5Fs1RVAzJBJMcx_!!6000000002116-2-tps-133-134.png",
  "https://img.alicdn.com/imgextra/i4/O1CN01dwK6KR1fPamQPQ43U_!!6000000003999-2-tps-141-134.png",
  "https://img.alicdn.com/imgextra/i3/O1CN01pI0ATm1Rm7duxwwxA_!!6000000002153-2-tps-212-134.png",
  "https://img.alicdn.com/imgextra/i2/O1CN01vJfVA8249RCXI0LAJ_!!6000000007348-2-tps-108-134.png",
  "https://img.alicdn.com/imgextra/i4/O1CN01VEqM7V1ETGKHqRyG8_!!6000000000352-2-tps-139-134.png",
  "https://img.alicdn.com/imgextra/i2/O1CN01Gsdtzf1wJUyhKqSYn_!!6000000006287-2-tps-207-134.png",
  "https://img.alicdn.com/imgextra/i1/O1CN01H4xJqN29KxF22RECI_!!6000000008050-2-tps-164-134.png",
]}
time={'40s'}
direction ='LTR'
width={110}
height={90}
/>

如果需要多行展示，可以重复使用该组件

log
log
log
log
log
log
log
log
log
log
log
log
log
log
log
log
log
log
log
log
log
log
log
log
log
log 
<Carousel
imgs = {[
  "https://img.alicdn.com/imgextra/i1/O1CN019O0Fcd27j6to9Vt7U_!!6000000007832-2-tps-195-134.png",
  "https://img.alicdn.com/imgextra/i1/O1CN01GqMYP21Xjj7xttIj0_!!6000000002960-0-tps-700-383.jpg",
  "https://img.alicdn.com/imgextra/i2/O1CN019Wc4cj1wAnRlUGyOa_!!6000000006268-0-tps-665-500.jpg",
  "https://img.alicdn.com/imgextra/i3/O1CN01FDriPl1JMSW5AX3XM_!!6000000001014-0-tps-960-640.jpg",
  "https://img.alicdn.com/imgextra/i3/O1CN01aZRCpD1muSmiuOESn_!!6000000005014-2-tps-112-134.png",
  "https://img.alicdn.com/imgextra/i3/O1CN01zeG94b1GEizHD8BC7_!!6000000000591-2-tps-118-134.png",
  "https://img.alicdn.com/imgextra/i4/O1CN01GDpRdg1GQAtBdB53c_!!6000000000616-2-tps-151-134.png",
  "https://img.alicdn.com/imgextra/i3/O1CN01ohI5Fs1RVAzJBJMcx_!!6000000002116-2-tps-133-134.png",
  "https://img.alicdn.com/imgextra/i4/O1CN01dwK6KR1fPamQPQ43U_!!6000000003999-2-tps-141-134.png",
  "https://img.alicdn.com/imgextra/i3/O1CN01pI0ATm1Rm7duxwwxA_!!6000000002153-2-tps-212-134.png",
  "https://img.alicdn.com/imgextra/i2/O1CN01vJfVA8249RCXI0LAJ_!!6000000007348-2-tps-108-134.png",
  "https://img.alicdn.com/imgextra/i4/O1CN01VEqM7V1ETGKHqRyG8_!!6000000000352-2-tps-139-134.png",
  "https://img.alicdn.com/imgextra/i2/O1CN01Gsdtzf1wJUyhKqSYn_!!6000000006287-2-tps-207-134.png",
  "https://img.alicdn.com/imgextra/i1/O1CN01H4xJqN29KxF22RECI_!!6000000008050-2-tps-164-134.png",
]}
time='40s'
direction ='LTR'
width={110}
height={90}
/>
<Carousel
imgs = {[
  "https://img.alicdn.com/imgextra/i1/O1CN01jMfPem1fyrHB2q4lc_!!6000000004076-2-tps-180-134.png",
  "https://img.alicdn.com/imgextra/i1/O1CN01AdpUOJ1ZeLqhzZVJi_!!6000000003219-2-tps-129-134.png",
  "https://img.alicdn.com/imgextra/i3/O1CN012VoLcg1tzEDXuDQwI_!!6000000005972-2-tps-249-134.png",
  "https://img.alicdn.com/tfs/TB1ghT_atTfau8jSZFwXXX1mVXa-280-160.jpg",
  "https://img.alicdn.com/tfs/TB1Xd4IOUY1gK0jSZFMXXaWcVXa-280-160.png",
  "https://img.alicdn.com/imgextra/i1/O1CN01CTgp0F1WFfW6nv8aV_!!6000000002759-2-tps-1660-712.png",
  "https://img.alicdn.com/imgextra/i2/O1CN01wcac5V1dk5H0aZKO1_!!6000000003773-0-tps-282-264.jpg",
  "https://img.alicdn.com/imgextra/i4/O1CN01SlosIa1JleJ9mYJWW_!!6000000001069-0-tps-442-138.jpg",
  "https://img.alicdn.com/imgextra/i4/O1CN01sAt7mP1RSt0kXjipx_!!6000000002111-0-tps-652-158.jpg",
  "https://img.alicdn.com/imgextra/i3/O1CN01R83oxC1I4lbxRG3KV_!!6000000000840-0-tps-1264-384.jpg",
  "https://img.alicdn.com/imgextra/i2/O1CN01NfCKrc1rvu7DweRhy_!!6000000005694-0-tps-772-604.jpg",
  "https://img.alicdn.com/imgextra/i3/O1CN01ejiV531WONBfLdYkN_!!6000000002778-0-tps-1442-478.jpg",
]}
time='40s'
direction ='RTL'
width={110}
height={90}
class='grayscale-0'
/>

API

属性说明类型默认值
imgs需要滑动的图片Array[]
time滑动需要的时间string40s
direction滑动的方向
从左到右：‘LTR’，从右到左：‘RTL’		stringRTL
width图片的宽度
单位：px		number112
height图片的高度
单位：px		number96
class自定义样式
如需使用彩色图片可赋值:“grayscale-0”		string""
theme移动端图片边框颜色
string”gray”