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 b8255c3..be0784d 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); });