From 9c9dc32789c4a147793fa70f40c9cc13253691e8145ca9a1735b542425402ba7 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Wed, 11 Feb 2026 11:52:04 +0100
Subject: [PATCH] [Slider] Fix some issues

---
 slider/{ => css}/slider.css |  0
 slider/js/slider.js         | 15 ++++++++++++---
 slider/ts/slider.ts         | 10 +++++-----
 3 files changed, 17 insertions(+), 8 deletions(-)
 rename slider/{ => css}/slider.css (100%)

diff --git a/slider/slider.css b/slider/css/slider.css
similarity index 100%
rename from slider/slider.css
rename to slider/css/slider.css
diff --git a/slider/js/slider.js b/slider/js/slider.js
index 1b9da07..3ffd3a0 100644
--- a/slider/js/slider.js
+++ b/slider/js/slider.js
@@ -120,7 +120,8 @@ var activateSlider = (interval, name) => {
         sliderAutoAdvance();
     });
     sliderAutoAdvance();
-    loadImageType(name);
+    if (name !== null)
+        loadImageType(name);
 };
 const sliderAutoAdvance = () => {
     if (sliderAutoAdvanceInterval > 0) {
@@ -145,13 +146,15 @@ const allowedExtensions = [
     'svg',
     'png'
 ];
+let oldName = '';
 /**
  * Load type of image, can be used to load images for different platforms (i.e. mobile optimization)
  * @param name - The name appended to the image filename
  */
 var loadImageType = (name) => {
+    const newClass = 'slider-type' + name;
     sliderElements.forEach(el => {
-        const baseURL = el.dataset.imageBaseURL;
+        const baseURL = el.dataset.imageBaseUrl;
         const filetype = el.dataset.filetype;
         if (allowedExtensions.indexOf(filetype) === -1) {
             console.warn('[ SLIDER ] Invalid filetype ' + filetype + ' for image element with id ' + el.id);
@@ -161,7 +164,13 @@ var loadImageType = (name) => {
             console.warn('[ SLIDER ] ImageBaseURL incorrect for image element with id ' + el.id);
             return;
         }
-        el.style.setProperty('background-image', `url(${baseURL}${name}${filetype})`);
+        try {
+            el.classList.remove(oldName);
+        }
+        catch ( /* empty */_a) { /* empty */ }
+        el.classList.add(newClass);
+        oldName = newClass;
+        el.style.setProperty('background-image', `url(${baseURL}${name ? name : ''}.${filetype})`);
     });
 };
 for (const el in fetchedElements) {
diff --git a/slider/ts/slider.ts b/slider/ts/slider.ts
index 7220e1e..591ea2e 100644
--- a/slider/ts/slider.ts
+++ b/slider/ts/slider.ts
@@ -122,7 +122,7 @@ let sliderInterval = 0;
  * @param name - The name of the platform (like desktop, used to load different images)
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-var activateSlider = ( interval: number, name: string ) => {
+var activateSlider = ( interval: number, name: string | null ) => {
     sliderAutoAdvanceInterval = interval;
     sliderContainer.addEventListener( 'mouseenter', () => {
         stopSliderAutoAdvance();
@@ -142,7 +142,8 @@ var activateSlider = ( interval: number, name: string ) => {
 
     sliderAutoAdvance();
 
-    loadImageType( name );
+    if ( name !== null )
+        loadImageType( name );
 };
 
 const sliderAutoAdvance = () => {
@@ -171,14 +172,13 @@ const allowedExtensions = [
     'png'
 ];
 
-
 /**
  * Load type of image, can be used to load images for different platforms (i.e. mobile optimization)
  * @param name - The name appended to the image filename
  */
 var loadImageType = ( name: string ) => {
     sliderElements.forEach( el => {
-        const baseURL = el.dataset.imageBaseURL;
+        const baseURL = el.dataset.imageBaseUrl;
         const filetype = el.dataset.filetype;
 
         if ( allowedExtensions.indexOf( filetype ) === -1 ) {
@@ -193,7 +193,7 @@ var loadImageType = ( name: string ) => {
             return;
         }
 
-        el.style.setProperty( 'background-image', `url(${ baseURL }${ name }${ filetype })` );
+        el.style.setProperty( 'background-image', `url(${ baseURL }${ name ? name : '' }.${ filetype })` );
     } );
 };