Commit 77d460e8c4ef808fd612187ebf06957a249177cc
1 parent
90f77e40
added offset function
Showing
2 changed files
with
17 additions
and
6 deletions
Show diff stats
src/components/carousel/carousel.vue
| 1 | 1 | <template> |
| 2 | 2 | <div :class="classes"> |
| 3 | - <div :class="[prefixCls + '-arrow', 'left']"> | |
| 3 | + <div :class="[prefixCls + '-arrow', 'left']" @click="add(-1)"> | |
| 4 | 4 | <div class='placeholder'></div> |
| 5 | 5 | <Icon type="arrow-left-b"></Icon> |
| 6 | 6 | </div> |
| ... | ... | @@ -10,7 +10,7 @@ |
| 10 | 10 | <slot></slot> |
| 11 | 11 | </div> |
| 12 | 12 | </div> |
| 13 | - <div :class="[prefixCls + '-arrow', 'right']"> | |
| 13 | + <div :class="[prefixCls + '-arrow', 'right']" @click="add(1)"> | |
| 14 | 14 | <div class='placeholder'></div> |
| 15 | 15 | <Icon type="arrow-right-b"></Icon> |
| 16 | 16 | </div> |
| ... | ... | @@ -144,6 +144,12 @@ |
| 144 | 144 | this.updatePos(); |
| 145 | 145 | }); |
| 146 | 146 | }, |
| 147 | + add (offset) { | |
| 148 | + let index = this.currentIndex; | |
| 149 | + index += offset; | |
| 150 | + if (index === this.slides.length) index = 0; | |
| 151 | + this.currentIndex = index; | |
| 152 | + }, | |
| 147 | 153 | slide () { |
| 148 | 154 | this.trackLeft = this.currentIndex * this.listWidth; |
| 149 | 155 | }, |
| ... | ... | @@ -151,10 +157,7 @@ |
| 151 | 157 | window.clearInterval(this.timer); |
| 152 | 158 | if (this.autoplay) { |
| 153 | 159 | this.timer = window.setInterval(() => { |
| 154 | - let index = this.currentIndex; | |
| 155 | - index ++; | |
| 156 | - if (index === this.slides.length) index = 0; | |
| 157 | - this.currentIndex = index; | |
| 160 | + this.add(1); | |
| 158 | 161 | }, this.autoplaySpeed); |
| 159 | 162 | } |
| 160 | 163 | } | ... | ... |
test/routers/carousel.vue
| ... | ... | @@ -11,6 +11,14 @@ |
| 11 | 11 | <i-col span="4"> |
| 12 | 12 | Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider> |
| 13 | 13 | </i-col> |
| 14 | + <i-col span="4"> | |
| 15 | + Switch To | |
| 16 | + <Button-group> | |
| 17 | + <i-button @click="currentIndex = 0">0</i-button> | |
| 18 | + <i-button @click="currentIndex = 1">1</i-button> | |
| 19 | + <i-button @click="currentIndex = 2">2</i-button> | |
| 20 | + </Button-group> | |
| 21 | + </i-col> | |
| 14 | 22 | </Row> |
| 15 | 23 | <Carousel style="width: 50%; border: solid 1px #000" |
| 16 | 24 | :current-index.sync="currentIndex" | ... | ... |