It seems like the issue you're encountering is related to the setTimeout function not being called repeatedly to cycle through the banners. The changeBanner function is only called once because startBanner is not being called again after the timeout function executes.
To create a continuous loop, you need to ensure that startBanner is called again at the end of changeBanner. Here's how you can modify your changeBanner function to achieve this:
const changeBanner = () => {
if (currentBanner.value === getBannersCount.value - 1) {
currentBanner.value = 0;
} else {
currentBanner.value += 1;
}
startBanner(); // Call startBanner again to set the next timeout
};
Additionally, you should clear the existing timeout in startBanner to prevent multiple timeouts from being set if startBanner is called multiple times:
const startBanner = () => {
clearTimeout(interval.value); // Clear any existing timeout
interval.value = setTimeout(changeBanner, 3000);
};
Make sure that startBanner is only called once after the banners are successfully fetched. It should not be called again in changeBanner, as the setTimeout inside startBanner will handle the loop.
Here's the updated startBanner and changeBanner functions:
const startBanner = () => {
clearTimeout(interval.value);
interval.value = setTimeout(changeBanner, 3000);
};
const changeBanner = () => {
if (currentBanner.value === getBannersCount.value - 1) {
currentBanner.value = 0;
} else {
currentBanner.value += 1;
}
startBanner(); // Restart the banner loop
};
With these changes, your banner should cycle through continuously every 3 seconds. Make sure to clear the timeout when the component is unmounted to prevent memory leaks:
import { onUnmounted } from 'vue';
onUnmounted(() => {
clearTimeout(interval.value);
});
This ensures that the timeout is cleared and no further changes to currentBanner are made once the component is no longer in use.
