From 975e322c317f067be026a4d2d65405c4bc22b889 Mon Sep 17 00:00:00 2001 From: ragul1697 Date: Thu, 10 Oct 2024 16:03:35 +0530 Subject: [PATCH 1/2] Hero Slider Issue fix --- src/script.js | 158 ++++++++++++++++++++++++++------------------------ 1 file changed, 82 insertions(+), 76 deletions(-) diff --git a/src/script.js b/src/script.js index b8255c3..378f717 100644 --- 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); }); From 3f8234186333d8f232c6abb718d33fe06974652b Mon Sep 17 00:00:00 2001 From: ragul1697 Date: Thu, 10 Oct 2024 16:26:03 +0530 Subject: [PATCH 2/2] Removed duplicate imports --- src/App.js | 10 +++------- src/script.js | 2 +- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index e5155a9..eaf1cec 100644 --- 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 index 378f717..be0784d 100644 --- a/src/script.js +++ b/src/script.js @@ -119,7 +119,7 @@ document.addEventListener("DOMContentLoaded", function () { * Initiating Her0 Slider after Preloader is completed */ setTimeout(() => { - const heroSlider = document.querySelector("[data-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]");