feat: reset carousel slide timeout when controls or indicators clicked

This commit is contained in:
cadiyak
2022-08-27 16:43:53 +02:00
parent 62edbd74ff
commit 568641fb43

View File

@@ -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(() => {