Set up home style and Splide carousel

assets/js/app.js

@@ -5,81 +5,42 @@ import create from 'swiped-events';
 // DATA
 // ----------------------------------------------------------------------------
 
-// UTILS
-
-const body = document.body;
-
-// SLIDER
-
-const homeSection = document.querySelector('.home-section');
-const sliderSection = document.querySelector('.slider-section');
-let slider;
-const slides = document.querySelectorAll('.splide__slide');
+// const body = document.body;
+const homeCarousels = document.querySelectorAll('.home__carousel');
 
 // ----------------------------------------------------------------------------
 // LOGIC
 // ----------------------------------------------------------------------------
 
-// UTILS
-
-// Enable CSS :active pseudo-class in Safari Mobile
-function enableActivePseudoClass() {
-    document.addEventListener("touchstart", function() {},false);
-}
-
 // Convert rem to pixels by getting font-size CSS property
-function convertRemToPixels(rem) {
-    let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
-    return rem * fontSize;
-}
+// function convertRemToPixels(rem) {
+//     let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
+//     return rem * fontSize;
+// }
 
-// SLIDER
-
-function setUpSlider() {
-    if (sliderSection) {
-        slider = new Splide('.splide', {
-            type: 'fade',
-            rewind: true,
-            rewindByDrag: true,
-            speed: 400,
-            width: '100vw',
-            height: '100vh',
-            arrows: false,
-            pagination: false,
-            easing: 'ease-in-out',
-            drag: true
-        });
-    }
-}
-
-function mountSlider() {
-    if (slider) {
-        slider.mount();
-    }
-}
-
-function changeSlideOnClick() {
-    if (homeSection && slider) {
-        homeSection.addEventListener('click', function(e) {
-            if (!e.target.closest('.navigation__link') && !e.target.closest('.social__link')) {
-                if (e.clientX >= window.innerWidth / 2) {
-                    slider.go('>');
-                } else {
-                    slider.go('<');
-                }
-            }
-        });
-    }
-}
-
-function changeSlideOnSwipe() {
-    if (homeSection && slider) {
-        homeSection.addEventListener('swiped', function(e) {
-            if (e.detail.dir === 'left') {
+// Set up multiple Splide carousels
+function setUpCarousels() {
+    if (homeCarousels.length) {
+        homeCarousels.forEach((item) => {
+            // Create Splide instance
+            let slider = new Splide(item, {
+                arrows: false,
+                drag: true,
+                easing: 'ease-in-out',
+                pagination: false,
+                rewind: true,
+                rewindByDrag: true,
+                role: 'undefined',
+                speed: 250,
+                type: 'fade',
+                width: 'auto',
+            });
+            // Mount slider
+            slider.mount();
+            // Change slide on click
+            slider.on('click', () => {
                 slider.go('>');
-            } else if (e.detail.dir === 'right') {
-                slider.go('<');
-            }
+            });
         });
     }
 }
@@ -88,13 +49,4 @@ function changeSlideOnSwipe() {
 // PROGRAM
 // ----------------------------------------------------------------------------
 
-// UTILS
-
-enableActivePseudoClass();
-
-// SLIDER
-
-setUpSlider();
-mountSlider();
-changeSlideOnClick();
-changeSlideOnSwipe();
+setUpCarousels();