100 lines
2.5 KiB
JavaScript
100 lines
2.5 KiB
JavaScript
import Splide from '@splidejs/splide';
|
|
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');
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// 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;
|
|
}
|
|
|
|
// 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') {
|
|
slider.go('>');
|
|
} else if (e.detail.dir === 'right') {
|
|
slider.go('<');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// PROGRAM
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// UTILS
|
|
|
|
enableActivePseudoClass();
|
|
|
|
// SLIDER
|
|
|
|
setUpSlider();
|
|
mountSlider();
|
|
changeSlideOnClick();
|
|
changeSlideOnSwipe();
|