51 lines
1.6 KiB
JavaScript
51 lines
1.6 KiB
JavaScript
import Splide from '@splidejs/splide';
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// 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: 0,
|
|
type: 'fade',
|
|
width: 'auto',
|
|
});
|
|
// Mount slider
|
|
slider.mount();
|
|
// Change slide on click
|
|
slider.on('click', () => {
|
|
slider.go('>');
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// PROGRAM
|
|
// ----------------------------------------------------------------------------
|
|
|
|
setUpCarousels();
|