The <slider> component is used to alternately display multiple images in one view.
Embedded component support
The <slider> component supports more advanced features and can only be used by nested <cell> subcomponents. <cell> is used to define the child list items in the slider. The Ant Cube Card Engine performs efficient memory reclamation on <cell> to achieve better performance.
Styles
Some capabilities in Common Styles are not supported, including padding in the box model, flex containers in the layout, flex members, background-image-related in the background, hover, and animation.
Property
Parameter | Description | Value Type | Default value | Writing | Remarks |
auto-play | Set whether to automatically carousel several images | boolean | true | Auto-play="true" | None |
interval | The interval at which images are automatically caroused. Unit: milliseconds. This parameter takes effect when auto-play is set to true. | number | 500ms | interval="500" | Set a value less than 500ms, which is expressed as 500ms |
infinite | Set whether to loop | boolean | true | infinite="true" | None |
show-indicators | Set whether to display the indicator | boolean | false | Show-indicators="true" | None |
scrollable | Set whether you can slide to switch pages by gesture operation | boolean | true | scrollable="true" | None |
index | Set the number of pages on which the slider is displayed. | Number | 0 | index="2" | None |
previous-margin | Set the distance from the previous page | Length unit | 0 | previous-margin="200px" | Cannot be used with |
next-margin | Set the distance of the next page | Length unit | 0 | next-margin="200px" | Cannot be used with |
Event
Common events are not supported. The following events are supported:
Field | Description | Parameter |
on-change | This event is triggered when the carousel index changes | index: the index of the displayed image, of the number type |
Examples
<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>