feat: reset carousel slide timeout when controls or indicators clicked
This commit is contained in:
@@ -75,15 +75,22 @@ const props = defineProps({
|
|||||||
|
|
||||||
const currentPicture = ref(0)
|
const currentPicture = ref(0)
|
||||||
const direction = ref('')
|
const direction = ref('')
|
||||||
|
const interval = ref()
|
||||||
|
|
||||||
const automaticSlide = () => {
|
const automaticSlide = () => {
|
||||||
setInterval(function() {
|
interval.value = setInterval(function() {
|
||||||
nextPicture()
|
nextPicture()
|
||||||
}, props.slideInterval)
|
}, props.slideInterval)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const resetInterval = () => {
|
||||||
|
clearInterval(interval.value)
|
||||||
|
automaticSlide()
|
||||||
|
}
|
||||||
|
|
||||||
const slideTo = (index: number) => {
|
const slideTo = (index: number) => {
|
||||||
currentPicture.value = index
|
currentPicture.value = index
|
||||||
|
resetInterval()
|
||||||
}
|
}
|
||||||
|
|
||||||
const nextPicture = () => {
|
const nextPicture = () => {
|
||||||
@@ -93,6 +100,7 @@ const nextPicture = () => {
|
|||||||
currentPicture.value = 0
|
currentPicture.value = 0
|
||||||
}
|
}
|
||||||
direction.value = 'right'
|
direction.value = 'right'
|
||||||
|
resetInterval()
|
||||||
}
|
}
|
||||||
|
|
||||||
const previousPicture = () => {
|
const previousPicture = () => {
|
||||||
@@ -102,6 +110,7 @@ const previousPicture = () => {
|
|||||||
currentPicture.value = props.pictures.length -1
|
currentPicture.value = props.pictures.length -1
|
||||||
}
|
}
|
||||||
direction.value = 'left'
|
direction.value = 'left'
|
||||||
|
resetInterval()
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user