The <slider> component displays multiple images sequentially in a single view.
Embedded component support
The <slider> component supports advanced features but can only nest <cell> child components. The <cell> component defines a child item in the slider. For improved performance, the Ant Dynamic Card engine efficiently revokes the memory of <cell> components.
Styles
Some features in common styles are not supported. These include the padding property in the box model, flex containers and flex members in layouts, background-image properties, hover effects, or animations.
Properties
Property | Description | Value type | Default value | Syntax | Notes |
auto-play | Specifies whether to automatically play the image carousel. | boolean | true | auto-play="true" | None |
interval | Specifies the time interval for the automatic carousel in milliseconds. This property takes effect only when auto-play is set to true. | number | 500 ms | interval="500" | If you set a value less than 500 ms, the interval defaults to 500 ms. |
infinite | Specifies whether the carousel loops. | boolean | true | infinite="true" | None |
show-indicators | Specifies whether to display indicators. | boolean | false | show-indicators="true" | None |
scrollable | Specifies whether you can switch between pages using swipe gestures. | boolean | true | scrollable="true" | None |
index | Specifies which page of the slider to display. | number | 0 | index="2" | None |
previous-margin | Specifies the margin to expose the previous page. | Length unit | 0 | previous-margin="200px" | Cannot be used with |
next-margin | Specifies the margin to expose the next page. | Length unit | 0 | next-margin="200px" | Cannot be used with |
Events
Common events are not supported. The following specific events are supported:
Name | Description | Parameters |
on-change | This event is triggered when the carousel index changes. | index: The index of the displayed image. The value is a number. |
Example
<template>
<div class="root">
<slider class="testSlider" :index="index" show-indicators="false" scrollable="true" duration="1000" auto-play=true @on-change="onChange(index)" >
<cell class="cell" v-for="(item, i) in imageList">
<image class="image" resize="contain" :src="item.src"></image>
</cell>
</slider>
</div>
</template>
<script>
export default {
data: {
},
}
</script>>
<style>
.root {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
width: 100%;
}
.image {
width: 100%;
height: 100%;
}
.cell {
width: 100%;
height: 100%;
background-color: blue;
flex-direction: column;
align-items: center;
}
.testSlider {
width: 100%;
background-color: red;
margin-top: 100px;
height: 400px;
}
</style>