julienmonnerie/assets/js/app.js

import Splide from '@splidejs/splide';
import create from 'swiped-events';

// ----------------------------------------------------------------------------
// DATA
// ----------------------------------------------------------------------------

// const body = document.body;
const homeCarousels = document.querySelectorAll('.home__carousel');

// ----------------------------------------------------------------------------
// LOGIC
// ----------------------------------------------------------------------------

// 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;
// }

// 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('>');
            });
        });
    }
}

// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------

setUpCarousels();