Merge pull request #74 from ragul1697/main

Fix: Hero Slider Issue
Anu27n · Oct 10, 2024 · 4f97991 · 4f97991
2 parents 83fbd10 + 3f82341
commit 4f97991
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 83 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,13 +1,9 @@
-import React from 'react';
 import Home from './Home';
-import './style.css';
-import './script.js'; 
-import './preloader.js'
-import './TopBar.js'
 import ScrollIndicator from './ScrollIndicator';
 import PreloaderContainer from './PreloaderContainer.js'; // For Preloader
-import './style.css'; 
-import './script.js'; 
+import './style.css';
+import './script.js';
+import './preloader.js';
 import './TopBar.js';
 
 

diff --git a/src/script.js b/src/script.js
@@ -1,4 +1,5 @@
 document.addEventListener("DOMContentLoaded", function () {
+
   /**
    * PRELOAD
    *
@@ -90,82 +91,6 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   });
 
-  /**
-   * HERO SLIDER
-   */
-  const heroSlider = document.querySelector("[data-hero-slider]");
-  const heroSliderItems = document.querySelectorAll("[data-hero-slider-item]");
-  const heroSliderPrevBtn = document.querySelector("[data-prev-btn]");
-  const heroSliderNextBtn = document.querySelector("[data-next-btn]");
-
-  let currentSlidePos = 0;
-  let lastActiveSliderItem = heroSliderItems[0];
-
-  const updateSliderPos = function () {
-    if (lastActiveSliderItem) {
-      lastActiveSliderItem.classList.remove("active");
-    }
-    if (heroSliderItems[currentSlidePos]) {
-      heroSliderItems[currentSlidePos].classList.add("active");
-    }
-    lastActiveSliderItem = heroSliderItems[currentSlidePos];
-  };
-
-  const slideNext = function () {
-    if (currentSlidePos >= heroSliderItems.length - 1) {
-      currentSlidePos = 0;
-    } else {
-      currentSlidePos++;
-    }
-
-    updateSliderPos();
-  };
-
-  if (heroSliderNextBtn) {
-    heroSliderNextBtn.addEventListener("click", slideNext);
-  }
-
-  const slidePrev = function () {
-    if (currentSlidePos <= 0) {
-      currentSlidePos = heroSliderItems.length - 1;
-    } else {
-      currentSlidePos--;
-    }
-
-    updateSliderPos();
-  };
-
-  if (heroSliderPrevBtn) {
-    heroSliderPrevBtn.addEventListener("click", slidePrev);
-  }
-
-  /**
-   * auto slide
-   */
-  let autoSlideInterval;
-
-  const autoSlide = function () {
-    autoSlideInterval = setInterval(function () {
-      slideNext();
-    }, 7000);
-  };
-
-  addEventOnElements(
-    [heroSliderNextBtn, heroSliderPrevBtn],
-    "mouseover",
-    function () {
-      clearInterval(autoSlideInterval);
-    }
-  );
-
-  addEventOnElements(
-    [heroSliderNextBtn, heroSliderPrevBtn],
-    "mouseout",
-    autoSlide
-  );
-
-  window.addEventListener("load", autoSlide);
-
   /**
    * PARALLAX EFFECT
    */
@@ -187,4 +112,85 @@ document.addEventListener("DOMContentLoaded", function () {
       parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`;
     }
   });
+
+  /**
+   * HERO SLIDER
+   * 
+   * Initiating Her0 Slider after Preloader is completed
+   */
+  setTimeout(() => {
+    // const heroSlider = document.querySelector("[data-hero-slider]");
+    const heroSliderItems = document.querySelectorAll("[data-hero-slider-item]");
+    const heroSliderPrevBtn = document.querySelector("[data-prev-btn]");
+    const heroSliderNextBtn = document.querySelector("[data-next-btn]");
+
+    let currentSlidePos = 0;
+    let lastActiveSliderItem = heroSliderItems[0];
+
+    const updateSliderPos = function () {
+      if (lastActiveSliderItem) {
+        lastActiveSliderItem.classList.remove("active");
+      }
+      if (heroSliderItems[currentSlidePos]) {
+        heroSliderItems[currentSlidePos].classList.add("active");
+      }
+      lastActiveSliderItem = heroSliderItems[currentSlidePos];
+    };
+
+    const slideNext = function () {
+      if (currentSlidePos >= heroSliderItems.length - 1) {
+        currentSlidePos = 0;
+      } else {
+        currentSlidePos++;
+      }
+
+      updateSliderPos();
+    };
+
+    if (heroSliderNextBtn) {
+      heroSliderNextBtn.addEventListener("click", slideNext);
+    }
+
+    const slidePrev = function () {
+      if (currentSlidePos <= 0) {
+        currentSlidePos = heroSliderItems.length - 1;
+      } else {
+        currentSlidePos--;
+      }
+
+      updateSliderPos();
+    };
+
+    if (heroSliderPrevBtn) {
+      heroSliderPrevBtn.addEventListener("click", slidePrev);
+    }
+
+    /**
+     * auto slide
+     */
+    let autoSlideInterval;
+
+    const autoSlide = function () {
+      autoSlideInterval = setInterval(function () {
+        slideNext();
+      }, 7000);
+    };
+
+    addEventOnElements(
+      [heroSliderNextBtn, heroSliderPrevBtn],
+      "mouseover",
+      function () {
+        clearInterval(autoSlideInterval);
+      }
+    );
+
+    addEventOnElements(
+      [heroSliderNextBtn, heroSliderPrevBtn],
+      "mouseout",
+      autoSlide
+    );
+
+    autoSlide();
+    // window.addEventListener("load", autoSlide);
+  }, 3000);
 });