[Slider] Fix some issues

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) {

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 })` );
     } );
 };