Commit 62808b2b030ad7c8b91a06c86b81a8ecdafc7c28
1 parent
1cc06612
reset autoplay timer after trigger
add prop: autoplay direction
Showing
2 changed files
with
21 additions
and
2 deletions
Show diff stats
src/components/carousel/carousel.vue
| ... | ... | @@ -47,6 +47,13 @@ |
| 47 | 47 | type: Number, |
| 48 | 48 | default: 2000 |
| 49 | 49 | }, |
| 50 | + autoplayDirection: { | |
| 51 | + type: String, | |
| 52 | + default: 'left', | |
| 53 | + validator (value) { | |
| 54 | + return oneOf(value, ['left', 'right']); | |
| 55 | + } | |
| 56 | + }, | |
| 50 | 57 | easing: { |
| 51 | 58 | type: String, |
| 52 | 59 | default: 'ease' |
| ... | ... | @@ -175,11 +182,13 @@ |
| 175 | 182 | |
| 176 | 183 | this.updateSlides(true, true); |
| 177 | 184 | this.updatePos(); |
| 185 | + this.updateOffset(); | |
| 178 | 186 | }); |
| 179 | 187 | }, |
| 180 | 188 | handleResize () { |
| 181 | 189 | this.listWidth = parseInt(getStyle(this.$el, 'width')); |
| 182 | 190 | this.updatePos(); |
| 191 | + this.updateOffset(); | |
| 183 | 192 | }, |
| 184 | 193 | add (offset) { |
| 185 | 194 | let index = this.currentIndex; |
| ... | ... | @@ -191,19 +200,20 @@ |
| 191 | 200 | dotsEvent (event, n) { |
| 192 | 201 | if (event === this.trigger && this.currentIndex !== n) { |
| 193 | 202 | this.currentIndex = n; |
| 203 | + // Reset autoplay timer when trigger be activated | |
| 204 | + this.setAutoplay(); | |
| 194 | 205 | } |
| 195 | 206 | }, |
| 196 | 207 | setAutoplay () { |
| 197 | 208 | window.clearInterval(this.timer); |
| 198 | 209 | if (this.autoplay) { |
| 199 | 210 | this.timer = window.setInterval(() => { |
| 200 | - this.add(1); | |
| 211 | + this.add(this.autoplayDirection === 'left' ? 1 : -1); | |
| 201 | 212 | }, this.autoplaySpeed); |
| 202 | 213 | } |
| 203 | 214 | }, |
| 204 | 215 | updateOffset () { |
| 205 | 216 | this.$nextTick(() => { |
| 206 | - this.handleResize(); | |
| 207 | 217 | this.trackOffset = this.currentIndex * this.listWidth; |
| 208 | 218 | }); |
| 209 | 219 | } | ... | ... |
test/routers/carousel.vue
| ... | ... | @@ -12,6 +12,13 @@ |
| 12 | 12 | Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider> |
| 13 | 13 | </i-col> |
| 14 | 14 | <i-col span="4"> |
| 15 | + <p>Direction</p> | |
| 16 | + <Button-group> | |
| 17 | + <i-button @click="autoplayDirection = 'left'">Left</i-button> | |
| 18 | + <i-button @click="autoplayDirection = 'right'">Right</i-button> | |
| 19 | + </Button-group> | |
| 20 | + </i-col> | |
| 21 | + <i-col span="4"> | |
| 15 | 22 | Switch To |
| 16 | 23 | <Button-group> |
| 17 | 24 | <i-button @click="currentIndex = 0">0</i-button> |
| ... | ... | @@ -59,6 +66,7 @@ |
| 59 | 66 | :current-index.sync="currentIndex" |
| 60 | 67 | :autoplay="autoplay" |
| 61 | 68 | :autoplay-speed="autoplaySpeed" |
| 69 | + :autoplay-direction="autoplayDirection" | |
| 62 | 70 | :dots="dots" |
| 63 | 71 | :trigger="trigger" |
| 64 | 72 | :arrow="arrow" |
| ... | ... | @@ -185,6 +193,7 @@ |
| 185 | 193 | currentIndex: 0, |
| 186 | 194 | autoplay: true, |
| 187 | 195 | autoplaySpeed: 2000, |
| 196 | + autoplayDirection: 'left', | |
| 188 | 197 | remove: false, |
| 189 | 198 | pushItem: [], |
| 190 | 199 | arrow: 'hover', | ... | ... |