Add Splide slider

This commit is contained in:
Paul Nicoué 2022-08-02 18:50:27 +02:00
parent f0f2633919
commit 0d52c5dd04
9 changed files with 4161 additions and 20 deletions

View file

@ -1,10 +1,19 @@
import Splide from '@splidejs/splide';
// ----------------------------------------------------------------------------
// DATA
// ----------------------------------------------------------------------------
// UTILS
const body = document.body;
// SLIDER
let splide = document.querySelector('.splide');
// IFRAME LOADING ANIMATIONS
const body = document.querySelector('body');
const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
const logoIcon = document.querySelector('.logo__icon');
@ -23,10 +32,38 @@ function enableActivePseudoClass() {
// Convert rem to pixels by getting font-size CSS property
function convertRemToPixels(rem) {
let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
return rem * fontSize;
}
// SLIDER
function setUpSlider() {
if (splide) {
splide = new Splide('.splide', {
type: 'fade',
rewind: true,
rewindByDrag: true,
speed: 400,
fixedWidth: '100vw',
fixedHeight: '100vh',
arrows: false,
pagination: false,
easing: 'ease-in-out',
drag: true,
wheel: true
}).mount();
}
}
function goToNextSlideOnClick() {
if (splide) {
splide.on('click', function(e) {
splide.go('>');
});
}
}
// IFRAME LOADING ANIMATIONS
function enableLogoIconRotation() {
@ -97,6 +134,11 @@ function loadExhibitionIframe() {
enableActivePseudoClass();
// SLIDER
setUpSlider();
goToNextSlideOnClick();
// IFRAME LOADING ANIMATIONS
loadExhibitionIframe();