Add Splide slider

public/assets/css/main.scss

@@ -1,4 +1,5 @@
 @use 'utils/minireset';
+@use '@splidejs/splide/dist/css/splide-core.min';
 @use 'partials/fonts';
 @use 'partials/variables' as *;
 @use 'partials/animations';
@@ -106,19 +107,28 @@ body {
 
 		path:nth-child(1) {
 			stroke: var(--black);
+			transition: stroke 400ms ease-in-out;
 		}
 
 		path:nth-child(2) {
 			stroke: var(--white);
-		}
-
-		&--rotate-vertical-left {
-			animation: rotate-vertical-left 800ms ease-in-out infinite;
+			transition: stroke 400ms ease-in-out;
 		}
 
 		&--rotate-horizontal-bottom {
 			animation: rotate-horizontal-bottom 800ms ease-in-out infinite;
 		}
+
+		&--white {
+
+			path:nth-child(1) {
+				stroke: var(--white);
+			}
+
+			path:nth-child(2) {
+				stroke: var(--black);
+			}
+		}
 	}
 }
 
@@ -226,6 +236,17 @@ body {
 // MAIN
 // ----------------------------------------------------------------------------
 
+// Slider section
+
+.splide {
+
+	&__image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+}
+
 // Exhibition section
 
 .exhibition-section {

public/assets/js/app.js

@@ -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();