reset autoplay timer after trigger
add prop: autoplay direction
This commit is contained in:
parent
1cc0661228
commit
62808b2b03
2 changed files with 21 additions and 2 deletions
|
@ -47,6 +47,13 @@
|
|||
type: Number,
|
||||
default: 2000
|
||||
},
|
||||
autoplayDirection: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
validator (value) {
|
||||
return oneOf(value, ['left', 'right']);
|
||||
}
|
||||
},
|
||||
easing: {
|
||||
type: String,
|
||||
default: 'ease'
|
||||
|
@ -175,11 +182,13 @@
|
|||
|
||||
this.updateSlides(true, true);
|
||||
this.updatePos();
|
||||
this.updateOffset();
|
||||
});
|
||||
},
|
||||
handleResize () {
|
||||
this.listWidth = parseInt(getStyle(this.$el, 'width'));
|
||||
this.updatePos();
|
||||
this.updateOffset();
|
||||
},
|
||||
add (offset) {
|
||||
let index = this.currentIndex;
|
||||
|
@ -191,19 +200,20 @@
|
|||
dotsEvent (event, n) {
|
||||
if (event === this.trigger && this.currentIndex !== n) {
|
||||
this.currentIndex = n;
|
||||
// Reset autoplay timer when trigger be activated
|
||||
this.setAutoplay();
|
||||
}
|
||||
},
|
||||
setAutoplay () {
|
||||
window.clearInterval(this.timer);
|
||||
if (this.autoplay) {
|
||||
this.timer = window.setInterval(() => {
|
||||
this.add(1);
|
||||
this.add(this.autoplayDirection === 'left' ? 1 : -1);
|
||||
}, this.autoplaySpeed);
|
||||
}
|
||||
},
|
||||
updateOffset () {
|
||||
this.$nextTick(() => {
|
||||
this.handleResize();
|
||||
this.trackOffset = this.currentIndex * this.listWidth;
|
||||
});
|
||||
}
|
||||
|
|
|
@ -11,6 +11,13 @@
|
|||
<i-col span="4">
|
||||
Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<p>Direction</p>
|
||||
<Button-group>
|
||||
<i-button @click="autoplayDirection = 'left'">Left</i-button>
|
||||
<i-button @click="autoplayDirection = 'right'">Right</i-button>
|
||||
</Button-group>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
Switch To
|
||||
<Button-group>
|
||||
|
@ -59,6 +66,7 @@
|
|||
:current-index.sync="currentIndex"
|
||||
:autoplay="autoplay"
|
||||
:autoplay-speed="autoplaySpeed"
|
||||
:autoplay-direction="autoplayDirection"
|
||||
:dots="dots"
|
||||
:trigger="trigger"
|
||||
:arrow="arrow"
|
||||
|
@ -185,6 +193,7 @@
|
|||
currentIndex: 0,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 2000,
|
||||
autoplayDirection: 'left',
|
||||
remove: false,
|
||||
pushItem: [],
|
||||
arrow: 'hover',
|
||||
|
|
Loading…
Add table
Reference in a new issue