`cube-slide` element is the entire slide component while `cube-slide-item` element is the page of each slide and it's slot is the content of the page.
Considering of the usual scenes of `cube-slide`, each carousel page is a link, so the easiest way to use it is to pass an Array which consists of image and link by the `data` props. We will render it as a carousel of a set of hyperlinked images by default.
Of course, we also support custom content, using the default slot and `cube-slide-item` component to customize the structure of each carousel page. Among them, the `cube-slide` element is the entire carousel component, and the `cube-slide-item` element is the page of each carousel, whose slot is the content of the page.
console.log('The index of current slide is '+current)
console.log('当前轮播图序号为:'+current)
},
clickHandler(item,index){
console.log(item,index)
...
...
@@ -46,6 +76,8 @@
}
```
Although you will use the `data` to generate the default content after using the custom content, it is still recommended that you pass the data by the `data` props, so our component can automatically perform data monitoring and re-rendering inside. Otherwise, you may need to call the `refresh` method to re-render by yourself, such as `this.$refs.slide.refresh()`.
- Initial Index
Initial Index value, default 0.
...
...
@@ -56,10 +88,9 @@
- Loop play
Loop play is turned on by default. You can cnfigure that with `loop` attribute.
Loop play is turned on by default. You can configure that with `loop` attribute.
```html
<cube-slide></cube-slide>
<cube-slide:loop="false"></cube-slide>
```
...
...
@@ -68,7 +99,6 @@
Automatic play is turned on by default. You can configure that with `auto-play` attribute.
```html
<cube-slide></cube-slide>
<cube-slide:auto-play="false"></cube-slide>
```
...
...
@@ -104,50 +134,6 @@
<cube-slide:allow-vertical="true"></cube-slide>
```
- refresh method
When Slide Items updated or Slide props updated, you can call `refresh` method to update Slide view.
```html
<cube-slideref="slide">
<cube-slide-itemv-for="(item, index) in items":key="index">