Add Splide slider

package-lock.json

@@ -5,12 +5,15 @@
 	"packages": {
 		"": {
 			"devDependencies": {
+				"@splidejs/splide": "^4.0.7",
 				"@symfony/webpack-encore": "^3.0.0",
 				"autoprefixer": "^10.4.7",
 				"core-js": "^3.23.4",
 				"postcss-loader": "^7.0.1",
 				"sass": "^1.53.0",
 				"sass-loader": "^13.0.2",
+				"ts-loader": "^9.3.1",
+				"typescript": "^4.7.4",
 				"webpack-notifier": "^1.15.0"
 			}
 		},
@@ -1887,6 +1890,12 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/@splidejs/splide": {
+			"version": "4.0.7",
+			"resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.0.7.tgz",
+			"integrity": "sha512-aJAOGJN2lwjwou3mxQofc3uhe+RXpw9in0WfysFX7AMT/mj7wSqoetfm41s7J8jU6FJ3ZWaLYgSJIpBAQ5wyqw==",
+			"dev": true
+		},
 		"node_modules/@symfony/webpack-encore": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-3.0.0.tgz",
@@ -7219,6 +7228,25 @@
 				"node": ">=0.6"
 			}
 		},
+		"node_modules/ts-loader": {
+			"version": "9.3.1",
+			"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.3.1.tgz",
+			"integrity": "sha512-OkyShkcZTsTwyS3Kt7a4rsT/t2qvEVQuKCTg4LJmpj9fhFR7ukGdZwV6Qq3tRUkqcXtfGpPR7+hFKHCG/0d3Lw==",
+			"dev": true,
+			"dependencies": {
+				"chalk": "^4.1.0",
+				"enhanced-resolve": "^5.0.0",
+				"micromatch": "^4.0.0",
+				"semver": "^7.3.4"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"typescript": "*",
+				"webpack": "^5.0.0"
+			}
+		},
 		"node_modules/type-is": {
 			"version": "1.6.18",
 			"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -7232,6 +7260,19 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/typescript": {
+			"version": "4.7.4",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+			"integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+			"dev": true,
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=4.2.0"
+			}
+		},
 		"node_modules/unicode-canonical-property-names-ecmascript": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -9163,6 +9204,12 @@
 				}
 			}
 		},
+		"@splidejs/splide": {
+			"version": "4.0.7",
+			"resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.0.7.tgz",
+			"integrity": "sha512-aJAOGJN2lwjwou3mxQofc3uhe+RXpw9in0WfysFX7AMT/mj7wSqoetfm41s7J8jU6FJ3ZWaLYgSJIpBAQ5wyqw==",
+			"dev": true
+		},
 		"@symfony/webpack-encore": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-3.0.0.tgz",
@@ -13132,6 +13179,18 @@
 			"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
 			"dev": true
 		},
+		"ts-loader": {
+			"version": "9.3.1",
+			"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.3.1.tgz",
+			"integrity": "sha512-OkyShkcZTsTwyS3Kt7a4rsT/t2qvEVQuKCTg4LJmpj9fhFR7ukGdZwV6Qq3tRUkqcXtfGpPR7+hFKHCG/0d3Lw==",
+			"dev": true,
+			"requires": {
+				"chalk": "^4.1.0",
+				"enhanced-resolve": "^5.0.0",
+				"micromatch": "^4.0.0",
+				"semver": "^7.3.4"
+			}
+		},
 		"type-is": {
 			"version": "1.6.18",
 			"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -13142,6 +13201,12 @@
 				"mime-types": "~2.1.24"
 			}
 		},
+		"typescript": {
+			"version": "4.7.4",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+			"integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+			"dev": true
+		},
 		"unicode-canonical-property-names-ecmascript": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",

package.json

@@ -6,12 +6,15 @@
 		"not dead"
 	],
 	"devDependencies": {
+		"@splidejs/splide": "^4.0.7",
 		"@symfony/webpack-encore": "^3.0.0",
 		"autoprefixer": "^10.4.7",
 		"core-js": "^3.23.4",
 		"postcss-loader": "^7.0.1",
 		"sass": "^1.53.0",
 		"sass-loader": "^13.0.2",
+		"ts-loader": "^9.3.1",
+		"typescript": "^4.7.4",
 		"webpack-notifier": "^1.15.0"
 	},
 	"scripts": {

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);
-		}
+			transition: stroke 400ms ease-in-out;
-
-		&--rotate-vertical-left {
-			animation: rotate-vertical-left 800ms ease-in-out infinite;
 		}
 
 		&--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();

site/controllers/gallery.php

@@ -5,11 +5,11 @@ return function ($pages, $page) {
 	// Get exhibition page object
 	$exhibitionsPage = $pages->template('exhibitions')->first();
 
-	// Get artworks files section content
+	// Get image files section content
-	$artworks = $page->files()->template("artwork")->sortBy('sort');
+	$images = $page->files()->template("image")->sortBy('sort');
 
 	return [
 		'exhibitionsPage' => $exhibitionsPage,
-		'artworks' => $artworks
+		'images' => $images
 	];
 };

site/templates/gallery.twig

@@ -18,4 +18,19 @@
 {% endblock %}
 
 {% block main %}
+
+	<section class="splide" aria-label="{{ site.title }}'s artwork gallery">
+
+		<div class="splide__track">
+			<ul class="splide__list">
+				{% for image in images %}
+					<li class="splide__slide">
+						<img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
+					</li>
+				{% endfor %}
+			</ul>
+		</div>
+		
+	</section>
+
 {% endblock %}

webpack.config.js

@@ -36,6 +36,7 @@ Encore
 		config.useBuiltIns = 'usage';
 		config.corejs = 3;
 	})
+	.enableTypeScriptLoader()
 	.enableSassLoader()
 	.enablePostCssLoader()
 ;