(function (ready) { if ( document.readyState === "complete" || document.readyState === "interactive" ) { ready(); } else { document.addEventListener("appLoaded", ready); } })(function domReady() { /* the document is now ready. */ let slideSpeed = 300; let zoomSpeed = 300; let automatedSlideSpeed = 5000; /* Duplicate Description Text */ let descriptionText = document.getElementsByClassName("text-container")[0].innerText; let titleTextEl = document.getElementsByClassName("title-text")[0]; titleTextEl.innerHTML = descriptionText; /* Create slider Controlls */ let slides = document.querySelectorAll('.slider > .custom-component-loop-wrapper > div'); let slidesCount = slides.length; let controllsContainer = document.getElementsByClassName("slide-bullets")[0]; for(let i = 0; i < slidesCount; i++){ let circle = createEl("div", null, "circle-el", null); controllsContainer.append(circle); // add events on circles circle.addEventListener("click", function(){ nextSlide(this); }); } /* Slider */ let controlCircles = document.getElementsByClassName("circle-el"); let selectedEl = Math.ceil((slidesCount / 2) - 1); let sliderContainer = document.getElementsByClassName("custom-component-loop-wrapper")[0]; document.addEventListener("appLoaded", () => { if (document.getElementById("home")){ sliderContainer.classList.add('is-not-in-cms'); } }); /* add selected class */ slides[selectedEl].classList.add("selected"); controlCircles[selectedEl].classList.add("selected"); /* Create Prev Next Buttons */ let slider_parent = document.getElementsByClassName("slider")[0]; let prevBtn = createEl("div", null, "slider_prev_btn", null); let nextBtn = createEl("div", null, "slider_next_btn", null); prevBtn.innerHTML = ` ` ; nextBtn.innerHTML = ` ` ; slider_parent.append(prevBtn); slider_parent.append(nextBtn); // add click events on Prev Next prevBtn.addEventListener("click", function(){ goToPrevSlide(); }); nextBtn.addEventListener("click", function(){ goToNextSlide(); }); /* Init Slider */ let currentSelected = getCurrentSelection(); setTimeout( function() { initSlider(currentSelected); }, 200); /* Automate Slider */ let automatedInterval; let intervalRunning = false; if(!document.hidden) { startInterval(); } /* Stop / Start Slider on tab active */ document.addEventListener( 'visibilitychange' , function() { if (document.hidden) { stopInterval(); } else { startInterval(); } }, false ); function goToPrevSlide() { let curentIntSelected = getCurrentSelection(); let nextSlideToRun = curentIntSelected - 1; if(curentIntSelected == 0){ nextSlideToRun = slidesCount - 1; } nextSlide(controlCircles[nextSlideToRun]); } function goToNextSlide() { let curentIntSelected = getCurrentSelection(); let nextSlideToRun = curentIntSelected + 1; if(curentIntSelected == slidesCount - 1){ nextSlideToRun = 0; } nextSlide(controlCircles[nextSlideToRun]); } function startInterval(){ automatedInterval = setInterval(function() { let curentIntSelected = getCurrentSelection(); let nextSlideToRun = curentIntSelected + 1; if(curentIntSelected == slidesCount - 1){ nextSlideToRun = 0; } nextSlide(controlCircles[nextSlideToRun]); }, automatedSlideSpeed); } function stopInterval(){ clearInterval(automatedInterval); } function nextSlide(el){ if(!el.classList.contains("selected")){ if(intervalRunning == false){ intervalRunning = true; stopInterval(); let nextSelected = getSlidePosition(el); let sliderWidthHalf = sliderContainer.offsetWidth / 2; let elWidth; if(!slides[0].classList.contains("selected")){ elWidth = slides[0].getBoundingClientRect().width; }else{ elWidth = slides[1].getBoundingClientRect().width; } let elWidthHalf = elWidth / 2; let centerPosition = Math.ceil((sliderWidthHalf - elWidthHalf) - (nextSelected * elWidth)); let selectedElement = document.querySelectorAll(".slide-bullets > div.selected")[0]; let selectedElementPosition = getSlidePosition(selectedElement); slides[selectedElementPosition].classList.remove("selected"); controlCircles[selectedElementPosition].classList.remove("selected"); slides[nextSelected].classList.add("selected"); controlCircles[nextSelected].classList.add("selected"); let tl = anime.timeline({ easing: 'linear', }); tl .add({ targets: slides[selectedElementPosition], scale: 1, duration : zoomSpeed }) .add({ targets: sliderContainer, translateX: centerPosition, duration : slideSpeed }) .add({ targets: slides[nextSelected], scale: 1.2, duration : zoomSpeed, complete: function() { intervalRunning = false; startInterval(); } }); } } } function initSlider(nextSelected){ let sliderWidthHalf = sliderContainer.offsetWidth / 2; let elWidth = slides[0].getBoundingClientRect().width; let elWidthHalf = elWidth / 2; let centerPosition = Math.ceil((sliderWidthHalf - elWidthHalf) - (nextSelected * elWidth)); let tl = anime.timeline({ easing: 'linear', }); tl .add({ targets: sliderContainer, translateX: centerPosition, duration : slideSpeed }) .add({ targets: slides[nextSelected], scale: 1.2, duration : zoomSpeed }); } function getSlidePosition(el){ for(let i = 0; i < controlCircles.length; i++){ if(controlCircles[i] == el){ return i; } } } function getCurrentSelection(){ for(let i = 0; i < controlCircles.length; i++){ if(controlCircles[i].classList.contains("selected")){ return i; } } } function createEl(elType, id, classes, inner){ let element = document.createElement(elType); if(typeof(id) === "string"){ element.setAttribute("id", id); } if(typeof(classes) === "string"){ element.classList.add(classes); } if(typeof(classes) === "object"){ let classArray = Object.values(classes); for(let i = 0; i < classArray.length; i++){ element.classList.add(classArray[i]); } } if(inner){ element.innerHTML = inner; } return element; } });

Training & Resources