From 6e44a12a53e469c6db3f5d1182cd9e4579525914 Mon Sep 17 00:00:00 2001 From: Stefaniia Bodnia <81180702+StefaBodnia@users.noreply.github.com> Date: Mon, 11 Mar 2024 12:39:10 +0100 Subject: [PATCH] timer --- assets/js/slider.js | 70 ++++++++++++++++----------------------------- 1 file changed, 24 insertions(+), 46 deletions(-) diff --git a/assets/js/slider.js b/assets/js/slider.js index e593dfe..65ffc02 100644 --- a/assets/js/slider.js +++ b/assets/js/slider.js @@ -194,57 +194,36 @@ document.addEventListener("DOMContentLoaded", () => { let currentIndex = 0; - const startAutoplay = () => { - autoplayInterval = setInterval(() => { - nextSlide(); - }, intervalDuration); - }; + const insertImages = () => { + images.forEach((image) => { + const img = document.createElement("img"); + img.src = folder + image.name; + slider.appendChild(img); + img.style.height = image.size * 100 + "%"; + }); + + const intervalDuration = 2000; // Set the interval duration in milliseconds (e.g., 5000ms = 5 seconds) + let autoplayInterval; - const stopAutoplay = () => { - clearInterval(autoplayInterval); + const startAutoplay = () => { + autoplayInterval = setInterval(() => { + nextSlide(); + }, intervalDuration); }; - // Start autoplay when the document is ready - startAutoplay(); + const stopAutoplay = () => { + clearInterval(autoplayInterval); + }; + + // Start autoplay when the document is ready + startAutoplay(); // Stop autoplay on mouseover and resume on mouseleave - sliderContainer.addEventListener("mouseover", stopAutoplay); - sliderContainer.addEventListener("mouseleave", () => { - if (!isTouchDevice()) { - startAutoplay(); - } - }); + sliderContainer.addEventListener("mouseover", stopAutoplay); + sliderContainer.addEventListener("mouseleave", startAutoplay); + + }; - // Touch event listeners for horizontal scrolling on mobile - let touchStartX = 0; - let touchEndX = 0; - - sliderContainer.addEventListener("touchstart", (e) => { - touchStartX = e.touches[0].clientX; - stopAutoplay(); // Stop autoplay on touchstart - }); - - sliderContainer.addEventListener("touchmove", (e) => { - touchEndX = e.touches[0].clientX; - }); - - sliderContainer.addEventListener("touchend", () => { - const swipeThreshold = 50; // Adjust the threshold as needed - const swipeDistance = touchEndX - touchStartX; - - if (swipeDistance > swipeThreshold) { - prevSlide(); - } else if (swipeDistance < -swipeThreshold) { - nextSlide(); - } - - startAutoplay(); // Resume autoplay on touchend - }); - - // Function to check if the device is a touch device - function isTouchDevice() { - return "ontouchstart" in window || navigator.msMaxTouchPoints; - } const updateSlider = () => { @@ -312,5 +291,4 @@ document.addEventListener("DOMContentLoaded", () => { - });