Carousel

轮播使用演示

---

基本操作

预览:

代码:

<g-carousel :selected.sync="selected" :reverse="false">
    <g-carousel-item name="hi">
        <div>1</div>
    </g-carousel-item>
    <g-carousel-item name='hello'>
        <div>2</div>
    </g-carousel-item>
    <g-carousel-item name='world'>
        <div>3</div>
    </g-carousel-item>
</g-carousel>

<script>
    export default {
        data() {
            return {selected: 'hi'}
        }
    }
</script>

说明

Carousel的selected可以指定选中初始内容，对应CarouselItem的name； CarouselItem的内容一定要有高度才能撑起； 支持移动端侧滑来操作轮播。

API

Carousel

参数	说明	类型	默认值
selected	当前轮播内容，对应CarouselItem的name，可以监听其改变	String	无
reverse	是否反向轮播（右到左）	Boolean	false
autoplay	是否自动播放	Boolean	true
autoPlayDelay	轮播间隔时间（毫秒）	Number	3000

CarouselItem

参数	说明	类型	默认值
name	轮播内容定义名称	String	无