Add Splide slider
This commit is contained in:
parent
f0f2633919
commit
0d52c5dd04
9 changed files with 4161 additions and 20 deletions
|
@ -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();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue