(function () { let currentSlide = 0; //starting point for review count let currentTopCourse = 1; const doNothing = () => {}; const leftArrow = document.getElementById('left-btn'); const rightArrow = document.getElementById('right-btn'); let slides = document.querySelectorAll('.slide'); //review entries let testimonialDots = document.getElementsByClassName( 'toggle-dot'); //list of 4 dots under review let testimonialDotArray = Array.from( testimonialDots); //convert nodelist into a working array const topCoursesDots = document.getElementsByClassName( 'top-course-selector'); //list of 4 dots under the top courses const topCoursesDotsArray = Array.from( topCoursesDots); //convert nodelist into a working array const topCourses = document.getElementsByClassName( 'list-flex-item'); //list of the top courses const topCoursesArray = Array.from(topCourses); //convert nodelist into a working array const topCourseList = document.getElementById('top-courses-list'); let usingMobileDevice; //true if device width is under 576px document.addEventListener('DOMContentLoaded', () => { innerWidth { if (!Hammer) { return; }; clearInterval(interval); // Create a manager to manage the element. var manager = new Hammer.Manager(topCourseList); // Create a recognizer for swipes var Swipe = new Hammer.Swipe(); // Add the recognizer to the manager. manager.add(Swipe); // event handler for left swipes manager.on('swipeleft', function (e) { if (currentTopCourse == 1 && innerWidth <= 576) { course2Focus(); } else if (currentTopCourse == 2 && innerWidth <= 576) { course3Focus(); } else if (currentTopCourse == 3 && innerWidth <= 576) { course4Focus(); } }); // event handler for right swipes manager.on('swiperight', function (e) { if (currentTopCourse == 2 && innerWidth <= 576) { course1Focus(); } else if (currentTopCourse == 3 && innerWidth <= 576) { course2Focus(); } else if (currentTopCourse == 4 && innerWidth { arrayName[0].className = `toggle-dot ${activeClassName}`; arrayName[1].className = 'toggle-dot'; arrayName[2].className = 'toggle-dot'; arrayName[3].className = 'toggle-dot'; } //fill the selected dot with orage background color and remove orange background on the previous dot const dotTwoActive = (arrayName, activeClassName) => { arrayName[1].className = `toggle-dot ${activeClassName}`; arrayName[0].className = 'toggle-dot'; arrayName[2].className = 'toggle-dot'; arrayName[3].className = 'toggle-dot'; } //fill the selected dot with orage background color and remove orange background on the previous dot const dotThreeActive = (arrayName, activeClassName) => { arrayName[2].className = `toggle-dot ${activeClassName}`; arrayName[0].className = 'toggle-dot'; arrayName[1].className = 'toggle-dot'; arrayName[3].className = 'toggle-dot'; } //fill the selected dot with orage background color and remove orange background on the previous dot const dotFourActive = (arrayName, activeClassName) => { arrayName[3].className = `toggle-dot ${activeClassName}`; arrayName[0].className = 'toggle-dot'; arrayName[1].className = 'toggle-dot'; arrayName[2].className = 'toggle-dot'; } function nextSlide() { //hide the current slide slides[currentSlide].className = 'slide inactive'; //make the next slide the currentslide currentSlide = (currentSlide + 1) % slides.length; //add the classes "slide" and "active" to show the next slide slides[currentSlide].className = 'slide active'; toggleDots(); } function prevSlide() { //hide the current slide slides[currentSlide].className = 'slide inactive'; //make the previous slide the currentslide currentSlide === 0 ? currentSlide = (3) : currentSlide = (currentSlide - 1); //add the classes "slide" and "active" to show the previous slide slides[currentSlide].className = 'slide active'; toggleDots(); } function dotSlide() { let e = event.target; //grab the click event dataset = e.dataset; //grab the dataset for each dot slides[currentSlide].className = 'slide inactive'; //hide the current slide currentSlide = dataset.num; //asign current slide to it's corresponding dot slides[currentSlide].className = 'slide active'; //add the classes "slide" and "active" to show the slide toggleDots(); }; function toggleDots() { currentSlide == 0 ? dotOneActive(testimonialDotArray, "dot-active") : currentSlide; currentSlide == 1 ? dotTwoActive(testimonialDotArray, "dot-active") : currentSlide; currentSlide == 2 ? dotThreeActive(testimonialDotArray, "dot-active") : currentSlide; currentSlide == 3 ? dotFourActive(testimonialDotArray, "dot-active") : currentSlide; }; rightArrow.addEventListener("click", () => { // go to next slide on click of the button nextSlide(); }); leftArrow.addEventListener("click", () => { // go to previous slide on click of the button prevSlide(); console.log('clicked'); }); testimonialDotArray.forEach((dot) => { dot.addEventListener('click', dotSlide); }) function topCourseDotToggle() { currentTopCourse == 1 ? dotOneActive(topCoursesDotsArray, "dot-active") : currentTopCourse; currentTopCourse == 2 ? dotTwoActive(topCoursesDotsArray, "dot-active") : currentTopCourse; currentTopCourse == 3 ? dotThreeActive(topCoursesDotsArray, "dot-active") : currentTopCourse; currentTopCourse == 4 ? dotFourActive(topCoursesDotsArray, "dot-active") : currentTopCourse; } // Slide to the 1st top course const course1Focus = () => { topCourseList.className = "course-1focus top-courses-list"; currentTopCourse = 1; topCourseDotToggle(); } // Slide to the 2nd top course const course2Focus = () => { topCourseList.className = "course-2focus top-courses-list"; currentTopCourse = 2; topCourseDotToggle(); } // Slide to the 3rd top course const course3Focus = () => { topCourseList.className = "course-3focus top-courses-list"; currentTopCourse = 3; topCourseDotToggle(); } // Slide to the 4th top course const course4Focus = () => { topCourseList.className = "course-4focus top-courses-list"; currentTopCourse = 4; topCourseDotToggle(); } //reset the position of the top courses list when the browser is resized window.addEventListener('resize', () => { innerWidth { usingMobileDevice == true ? course1Focus() : doNothing(); }); topCoursesDotsArray[1].addEventListener('click', () => { usingMobileDevice == true ? course2Focus() : doNothing(); }); topCoursesDotsArray[2].addEventListener('click', () => { usingMobileDevice == true ? course3Focus() : doNothing(); }); topCoursesDotsArray[3].addEventListener('click', () => { usingMobileDevice == true ? course4Focus() : doNothing(); }); //slide to the selected top course topCoursesArray[0].addEventListener('click', () => { usingMobileDevice == true ? course1Focus() : doNothing(); }); topCoursesArray[1].addEventListener('click', () => { usingMobileDevice == true ? course2Focus() : doNothing(); }); topCoursesArray[2].addEventListener('click', () => { usingMobileDevice == true ? course3Focus() : doNothing(); }); topCoursesArray[3].addEventListener('click', () => { usingMobileDevice == true ? course4Focus() : doNothing(); }); })();