ui-slide 轮播图组

版本：v2.3.11

轮播图组件用于展示多张图片或内容，支持自动播放、手势滑动等功能

基本使用

<template>
  <div class="slide-demo">
    <ui-slide>
      <ui-slide-item>
        <img src="https://example.com/slide1.jpg" alt="轮播" style="width: 100%; height: 200px; object-fit: cover;" />
      </ui-slide-item>
      <ui-slide-item>
        <img src="https://example.com/slide2.jpg" alt="轮播" style="width: 100%; height: 200px; object-fit: cover;" />
      </ui-slide-item>
      <ui-slide-item>
        <img src="https://example.com/slide3.jpg" alt="轮播" style="width: 100%; height: 200px; object-fit: cover;" />
      </ui-slide-item>
    </ui-slide>
  </div>
</template>

<style scoped>
.slide-demo {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}
</style>

Props

参数	类型	默认值	说明
autoplay	Boolean	true	是否自动播放
interval	Number	3000	自动播放间隔，单位：ms
duration	Number	500	动画持续时间，单位：ms
loop	Boolean	true	是否支持循环播放
showIndicators	Boolean	true	是否显示指示
showArrows	Boolean	false	是否显示左右箭头
arrowDirection	String	'vertical'	箭头方向，可选值：horizontal、vertical
initialIndex	Number	0	初始索引
direction	String	'horizontal'	滑动方向，可选值：horizontal、vertical

Events

事件	说明	回调参数
change	轮播切换时触	(index: Number) 当前索引
click	点击轮播项时触发	(index: Number) 当前索引

Slots

名称	说明
default	轮播项内
indicator	自定义指示器
prev-arrow	自定义左箭头
next-arrow	自定义右箭头

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/functional/slide/slide